This page assumes that the reader already has a working knowledge of tables. If you are wanting to learn the basic structure and layout of tables, please go to the tables tutorial

Netscape 4.75 will still not read these specifications correctly, in order to view this page correctly you will need Internet Explorer 5.0 or better.

Use these attributes and tags sparingly, some of your visitors may be able to view this, others will not. If you cannot see the examples correctly, you should update your browser.

<table>

The <table> command, of course, begins the construction of the table. As in previous HTML specifications, the table command still incorporates border=, bordercolor=, cellpadding=, ect..

frame=

The 'frame' attribute allows control of the borders inside and outside of the table:

• above - displays top border only
• below - displays bottom border only
• border - dislays all borders
• box - displays all borders
• hsides - displays horizontal borders only
• vsides - displays vertical borders only
• lhs - displays left border only
• rhs - displays right border only
• void - displays no border (like border=0)

rules=

As the 'frame' attribute deals with the outside border, the rules= deals with the inside borders.

• all - displays all borders
• cols - displays borders between cells
• rows - displays borders between rows
• groups - displays borders between groups of cells
• none - hides all inside borders

Example:

<table align=center border=2 bordercolor="blue" frame="hsides" rules="cols">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>

<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Will produce:

Cell 1	Cell 2
Cell 3	Cell 4

summary=

The summary attribute deals with non-visual media. It gives a summary of the table's purpose and/or structure. It was designed for voice systems for the blind.

<table summary="This is an example table">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

Any formatting attribute such as borders, frames, ect., can be added and will be displayed on the screen as usual. The summary is not displayed, it is for non-visual media only.

EventHandlers:

In HTML 4.0, event handlers such as onmouseover/onmouseout, onClick, and style attributes can be used inside the <table> command:

Example:

<table onmouseover="window.status='Click here';return true" onmouseout="window.status=' ';retrun true" onClick="alert('Wow, that is great')" border=2 bordercolor="red">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

Will produce:

Cell 1

Cell 2

<colgroup>

The 'colgroup' command lets you to set parameters to the data in columns of a table. It can set up widths, colors, and Style Sheet effects.

• align - aligns the text horizontally inside the group of cells
• valign - allows the alignment of text vertically inside the group of cells
• char/charoff - allows setting of alignment at a certain character
• span - allows the attributes to span across one or more columns
• height/width - sets the height and width of the group

Example:

<table border=2 frame="vsides" rules="cols" bordercolor="purple" width="80%" align=center> <tr>
<colgroup span=2 align="char" char="." charoff="50%" height="30" width="30">
<td>100.3</td>
<td>165.28</td>
<td>Yesterday</td>
</tr>
<tr>
<td>144.32</td>
<td>120.6</td>
<td>Today</td>
</colgroup>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</table>

Will produce:

100.3	165.28	Yesterday
144.32	120.6	Today
Cell 5	Cell 6	Cell 7

<tbody>

The 'tbody' command works similarly to the 'colgroup' command except that it will allow you to surround some or all cells, not just columns. The same attributes work with 'tbody' as it does in colgroup and also uses the bgcolor attribute.

Example:

<table width="85%" align=center border=3 bordercolor="purple" frame="above" rules="hls">
<tbody bgcolor="pink" align="right">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Will produce:

Cell 1	Cell 2
Cell 3	Cell 4

<thead> & <tfoot>

The 'thead' and 'tfoot' work as a header and footer. The 'thead' must be place immediately after the 'table' command, much like the <head> in the HTML document. The 'tfoot' must follow immediatly after the 'thead'. Although, you can use both commands or either alone, but there can be only one 'thead' and one 'tfoot' in a single table.

The attributes are:

• align - aligns text in the cells
• valign - aligns text vertically in cells
• char/charoff - aligns text at a certain character
• bgcolor - sets the color of the cells in the thead/tfoot

Example:

<table width="85%" border=3 bordercolorlight="red" frame="vsides" rules="rows" align=center>
<thead bgcolor="pink">
<tr>
<td colspan=2>This is the header</td>
</tr>
</thead>
<tfoot bgcolor="pink">
<tr>
<td colspan=2>This is the footer</td>
</tr>
</tfoot>
<tbody bgcolor="yellow">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>

Will produce:

This is the header
This is the footer
Cell 1	Cell 2
Cell 3	Cell 4

<td>

Additional attributes to the 'td' command are:

• abbr - sets text 'popup' for table cells
  <td abbr="Additional information">Cell</td>
• axis - sets a discription of a cell (non-visual media)
  <td axis="discription of cell">Cell</td>
• char/charoff - sets alignment at a certain character
  <td char="." charoff="65%">Cell . data</td>
• headers - used with <th> and <td> to set up non-visual information
  <tr>
  <th id="first">First Header
  <th id="second">Second Header
  </tr>
  <td headers="first">Cell Data
  <td headers="second">Cell Data
• scope - sets addtional sections of the table the same as the td cell
  • col - sets the rest of the column
  • colgroup - sets the rest of the column group
  • row - sets the rest of the row
  • rowgroup - sets the rest of the row group
  
  <td bgcolor="red" scope="col">

<TH> & <TR>

The 'th' and 'tr' commands will accept the same six new attributes as the 'td' command, as well as the align, valign, and other previous values.

That's all I will be covering here. If you would like more technical information about the commands covered here, W3C has an indepth explination of each command, attribute, value, function, and application purpose.