|
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> |
||
| <td colspan=2></td> | <td colspan=2></td> | ||
| <td colspan=2 bgcolor="#333333"> </td> |
<td colspan=2 align=right> </td> |
||
<br><td colspan=2 bgcolor="#333333"> <br></td> |
<td colspan=2 valign=bottom></td> |
||
| <td colspan=4> </td> | |||
| <td colspan=4 align=center></td> | |||
| <td colspan=4 align=right></td> | |||
|
<td bgcolor="#666666" rowspan=3> </td> | <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] [jawjahboy.com] [Tools Index