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 |
|
Table Tags:
NN: Netscape, IE: Internet Explorer,
W3C: Web Standard
| Start Tag |
NN |
IE |
W3C |
Purpose |
| <table> |
3.0 |
3.0 |
3.2 |
Defines a table |
| <th> |
3.0 |
3.0 |
3.2 |
Defines a table header |
| <tr> |
3.0 |
3.0 |
3.2 |
Defines a table row |
| <td> |
3.0 |
3.0 |
3.2 |
Defines a table cell |
| <caption> |
3.0 |
3.0 |
3.2 |
Defines a table caption |
| <colgroup> |
|
3.0 |
4.0 |
Defines groups of table columns |
| <col> |
|
3.0 |
4.0 |
Defines the attribute values for one or more columns
in a table |
| <thead> |
|
4.0 |
4.0 |
Defines a table head |
| <tbody> |
|
4.0 |
4.0 |
Defines a table body |
| <tfoot> |
|
4.0 |
4.0 |
Defines a table footer |
|
