Tables are used to lay out content in tabular format. The <table> tag is the main construct, but the complete list of tags covered here comprises:

• <table>
• <td>
• <th>
• <tr>
• <caption>

Syntax and Usage

These are HTML tags, so they can be upper or lower case, but we recommend lower case.

Optional attributes are shown in italics, and the vertical bar character | denotes a choice, so left|center|right means one of left, center or right.

<table border="1">


<caption>Caption</caption>

<tr align="left|center|right" valign="top|middle|bottom">


<td|th align="left|center|right" valign="top|middle|bottom" colspan="n" rowspan="n">...cell contents...</td|th>


...more cells...

</tr>


...more rows...

</table>

Here's how to create a table:

• Start a table with a <table> tag, and end it with a corresponding </table> tag; these act like a paragraph tag pair, so don't put a table inside a paragraph, blockquote and so on.

• Rows are created one after the other, with each row enclosed by a <tr>...</tr> pair. For each row we have to create each cell in that row, from left to right, with the contents of each cell being enclosed by a <td>...</td> pair (or <th>...</th> for a header cell, which is just like a normal row but is displayed as a header row, usually in bold).

• If you want a cell to be blank, use &nbsp; as the cell's contents. &nbsp; is the entity for a non-breaking space, and should be used for empty cells: never create an empty cell with <td></td> as this might cause some problems with some browsers (notably Netscape).

• Putting border="1" after the table tag will put a border round each table cell. This is useful if you think you're going to have multiple-line cells and things might not line up obviously.

• The align and valign attributes control how the text is aligned horizontally and vertically within cells. If included with the <tr> tag they control that whole row, whereas putting them with individual cells controls just those cells' alignments.

• The colspan and rowspan attributes make cells span multiple columns and rows, the number being given by the argument. The best way to discover how these work is by experimentation.

Known Issues

Both Netscape and Internet Explorer reset the font in table cells to the default for that page, and ignore the current settings. This means that the font inside table cells will probably revert to Times. Changing fonts, however, is not possible in Approved GuideML, so this problem will be fixed at the parser end.

Example One

Example Two

Further Information

• Using <table> in the h2g2 Edited Guide
• The DNA GuideML Clinic