[Top] [Up] [Next] [Previous]

9 - Tables

Tables are specified using the TABLE element. This allows you to define a caption and to differentiate header and data cells. Cells may contain, text, multiple paragraphs, lists and headers. Adjacent cells can be merged, e.g. to define a header which spans two columns. A simple table could look like:

This is defined by the markup:

<table border>
<caption>A simple table</caption>
<th>Year <th>Month <th>Day <tr>
<td>1972 <td>June <td>23rd <tr>
<td>1982 <td>October <td>7th
The BORDER attribute acts as a hint to the browser to draw lines enclosing each cell. The TH element precedes header cell text and the TD element precedes data cell text. The TR element is used to separate table rows. By default text is centered in each cell. Header text should be shown emphasised, e.g. the browser could use a bold sans serif font for headers and a serif font for the data cells. The next example shows how cells can be merged with their neighbors:

This table is defined by the markup:

<table border>
<caption>A more complex table</caption>
<th rowspan=2><th colspan=2>average<th rowspan=2>other<br>category<tr>
<th>height <th>weight <tr>
<th align=left>males <td>1.9 <td>0.003 <td>yyy <tr>
<th align=left>females <td>1.7 <td>0.002 <td>xxx
The first cell (a header cell) is merged with the cell below it: <th rowspan=2>. Note that this merged cell is empty - the definition of the next column for the first row starts immediately. Looking again at the first row, the second column is merged with the third: <th colspan=2>. The definition for the third column is skipped as it was covered by the merged cell. The fourth column/first row is also merged, this time with the next row: <th rowspan=2>. The <BR> element has been used here to force a line break between other and category. The <TR> element signifies the end of the first row and the beginning of the second. Note that empty cells at the end of a row can be omitted as the <TR> element unambiguously marks the end of the row.

The second row only contains definitions for the second and third columns since the others were merged with cells on the preceding row. The general rule is to avoid defining any cell twice. The last two rows start with headers and the align=left attribute ensures that the browser will align these headers to the left of their cells. The ALIGN attribute can be one of LEFT, CENTER or RIGHT, with CENTER as the default. It can be used with both TH and TD.

HTML+ Discussion Document - November 8, 1993

[Top] [Up] [Next] [Previous]