HTML Class - Fall 2002
HTML Tables
With HTML you can create tables.
Tables
Tables are defined with the <table> tag. A table is divided into rows
(with the <tr> tag), and each row is divided into data cells (with the
<td> tag). The letters td stands for "table data," which is the content of
a data cell. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> |
How it looks in a browser:
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without
any borders. Sometimes this can be useful, but most of the time, you want the
borders to show.
To display a table with borders, you will have to use the border
attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table> |
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> |
How it looks in a browser:
Heading |
Another Heading |
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table> |
How it looks in a browser:
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
|
Note that the borders around the empty table cell are missing.
To avoid this, add a non-breaking space ( ) to empty data cells, to
make the borders visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table> |
How it looks in a browser:
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
|
Basic Notes - Useful Tips
The <thead>,<tbody> and <tfoot> elements are seldom used,
because of bad browser support. Expect this to change in future versions of
XHTML.
Table Tags
Tag |
Description |
<table> |
Defines a table |
<th> |
Defines a table header |
<tr> |
Defines a table row |
<td> |
Defines a table cell |
<thead> |
Defines a table head |
<tbody> |
Defines a table body |
<tfoot> |
Defines a table footer |
|