Tables

A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.

Table Elements
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 below 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 below 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 below for more information.

Table Attributes
NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>.
Attribute Description
  • ALIGN (LEFT, CENTER, RIGHT)

  • VALIGN (TOP, MIDDLE, BOTTOM)

  • COLSPAN=n

  • ROWSPAN=n

  • NOWRAP

  • Horizontal alignment of a cell.

  • Vertical alignment of a cell.

  • The number (n) of columns a cell spans.

  • The number (n) of rows a cell spans.

  • Turn off word wrapping within a cell.

General Table Format

The general format of a table looks like this: 
 
<TABLE>  
   start of table definition 
 
<CAPTION> caption contents </CAPTION>      
  caption definition 
 
<TR>     
  start of first row definition 
<TH> cell contents </TH>      
  first cell in row 1 (a head) 

 
<TH> cell contents </TH>      
  last cell in row 1 (a head) 
</TR>    
  end of first row definition  
<TR>     
  start of second row definition 
<TD> cell contents </TD>
  first cell in row 2 

 
<TD> cell contents </TD>      
  last cell in row 2 
</TR>    
  end of second row definition 

 
<TR>     
  start of last row definition 
<TD> cell contents </TD>
  first cell in last row ... 
<TD> cell contents </TD>      
  last cell in last row 
</TR>    
  end of last row definition 
 
</TABLE> 
  end of table definition

A Basic Table

A B C
D E F

The Basic Table is created with this HTML:

<TABLE BORDER>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>

A ROWSPAN Demonstration

Item 1 Item 2 Item 3
Item 4 Item 5

The ROWSPAN demo was made with this HTML:

<table border><TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>

Demonstration of COLSPAN with HEADERS

Head1 Head2
A B C D
E F G H

That was done using this HTML:

<TABLE BORDER>
<TR> <TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD>
<TD>F</TD>
<TD>G</TD>
<TD>H</TD>
</TR>
</TABLE>

Demonstration of SIDE HEADERS and ROWSPAN

Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 69 Item 11

That was done with this HTML:

<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD>
<TD>Item 2</TD>
<TD>Item 3</TD>
<TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD>
<TD>Item 6</TD>
<TD>Item 7</TD>
<TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD>
<TD>Item 10</TD>
<TD>Item 69</TD>
<TD>Item 11</TD>
</TR>
</TABLE>

A table using all the above elements:

Average
Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002

That was made using this HTML:

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
Average</TH></TD>
</TR>
<TR>
<TD><TH>Height</TH>
<TH>Weight</TH>
</TD> </TR>
<TR>
<TH ROWSPAN=2>Gender</TH>
<TH>Males</TH>
<TD>1.9</TD>
<TD>0.003</TD>
</TR>
<TR>
<TH>Females</TH>
<TD>1.7</TD>
<TD>0.002</TD>
</TR>
</TABLE>

A couple of things you have to remember about tables in general:

Number one is to remember this order: Table border, table row, and table data. That is the order in which to set up your table.
The table data tags (<td>) are always enclosed in a table row tag (<tr>), and the table row tag is always in between the opening and closing tags, which are <table border> and </table>, respectively.
You can have all the table rows you want, and all the table data boxes you want, so experiment!

Number two is the table border instructions: You use the opening tag of <table border> because if you do not include the word border then you will still make a table, but it will not be enclosed in anything and hardly resemble a table at all! Also, when using the <table border> tag, you can add on to the size of the border by putting =# after table border, putting any number 1-99 in the place of the hash symbol (#).

Click here to go back to main page.
Hosted by www.Geocities.ws

1