How to create html Table

 

Table

The format of table is:

<TABLE>
<TR> 
<TD> Table Entry </TD>
<TD> Table Entry </TD> 
</TR>
<TR> 
<TD> Table Entry </TD>
<TD> Table Entry </TD> 
</TR>
</TABLE>

The whole table is opened and closed with <TABLE> </TABLE>. Each row is encapsulated in <TR> </TR>. Within the row are cells, enclosed in <TD> </TD>. There can be as many rows and columns as you want and as will fit on the screen. The browser will autoformat the rows, vertically centering cell contents if necessary. If you want a cell to span more than one column, enclose it in <TD COLSPAN=X> </TD>, where X indicate the number of columns to span. Similarly, <TD ROWSPAN=X> </TD> will cause the cell to span X rows. A border can be placed around all the cells by using <TABLE BORDER=X> </TABLE>, where X is the number of pixels thick the border should be. Let's see an example:

   <CENTER><TABLE BORDER=1 WIDTH="62%" HEIGHT=90>
   <TR>
      <TD WIDTH=82><CENTER> Name</CENTER></TD>
      <TD WIDTH=111><CENTER>Phone</CENTER></TD>
      <TD WIDTH=91><CENTER>ID</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>John Lee</CENTER></TD>
      <TD WIDTH=111><CENTER>456-968</CENTER></TD>
      <TD WIDTH=91><CENTER>276580</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>Cherry Heitz</CENTER></TD>
      <TD WIDTH=111><CENTER>789-326</CENTER></TD>
      <TD WIDTH=91> <CENTER>908743</CENTER></TD>
   </TR>
   </TABLE></CENTER>

Name	Phone	ID
John Lee	456-968	276580
Cherry Heitz	789-326	908743

The value of width and height can be "xx%" or XX. For example: WIDTH="80%" or WIDTH=450. "xx%" allow the table size changing while the window size is changing. The value of Border can be zero. In this case, the table will have no border. You can make a table looking like this:

The following is the code of this table.

     <TABLE BORDER=10 CELLSPACING=10 CELLPADDING=2>
     <TR><TD></TD><TD></TD></TR>
     <TR><TD></TD><TD></TD></TR>
     </TABLE>

The CELLSPACING attribute refers to the space between cells and should be in pixels. The CELLPADDING attribute refers to the spacing within the cell in pixels (the space between the cell walls and the contents of the cell).

Element	Description
<TABLE> </TABLE>	defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border.
<CAPTION> </CAPTION>	defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption.
<TR> </TR>	specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.
<TH> </TH>	defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
<TD> </TD>	defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Attribute	Description
ALIGN (LEFT, CENTER, RIGHT)	Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM)	Vertical alignment of a cell.
COLSPAN=n	The number (n) of columns a cell spans.
ROWSPAN=n	The number (n) of rows a cell spans.
NOWRAP	Turn off word wrapping within a cell.

Topics:

Basic Tags
Character paragraph and positions tags
Styles Tags
Lists Tags
Links Tags
Images Tags
Color
Table
Form
Frames