This page is intended as a basic table tutorial.

Tables are a very good way to organize a webpage. This table contains 4 columns (4 cells in each row). In the example and rules section, each cell has the exact code that made it. Font tags are not included.

Tag   Default
<table> Begins every table  
</table> Ends every table  
  border in pixels 0
* width in pixels or % of page 0
* height in pixels or % of page 0
* cellpadding spacing between content and edge of cell 2
  cellspacing spacing between cells 2
* align (horiz placement of contents) left, center, or right left
* valign (vertical placeent of contents) top, middle, or bottom middle
* bgcolor color name or hex code none
* Also used as attributes in row and cell tags.
<th> header -- bold and centered by default.
</th> ends header.
<tr> begins each row
</tr> ends each row
<td> begins each cell
</td> ends each cell
Examples and Rules of Table Behavior
<th colspan=4></th>
Each row on this table begins with<tr> and ends with </tr>.
<td colspan=3></td> <td>
<td colspan=2></td> <td colspan=2></td>
<td colspan=2
<td colspan=2
align=right> </td>

<br><td colspan=2

<td colspan=2
<td colspan=4> </td>
<td colspan=4 align=center></td>
<td colspan=4 align=right></td>
<td bgcolor="#666666" rowspan=3>
<td colspan=3> </td> </tr>
<tr><td colspan=3> </td> </tr>
<tr><td colspan=3></td> </tr>
<td colspan=2 bgcolor="#0066ff" height="200"></td> <td colspan=2 bgcolor="#0066ff" align="right" valign="top"> </td>
<td>The height of a row is determined by the height of the tallest cell in that row. An image or any attribute that defines the tallest cell controls the entire row. </td> <td> </td> <td> </td> <td height=10> </td>
<td>The width of a cell is determined by the widest cell in that column. An image or any attribute that defines the widest cell controls the entire column. </td> <td width="10"> </td> <td> </td> <td> </td>


Colspan Tutorial | Rowspan Tutorial | Combination Tutorial

Table Art] [] [Tools Index