You are here:
Tables: Anatomy of a table - foundation
The basis for table markup is the table element. Within this element, markup for rows is added - the tr (table row) element - and subsequently, separate cells are made in each row, using the td (table data) element. The information is placed in these cells.
Example of a simple table (HTML)
<table>
<tr>
<td>Cell 1 in row 1</td>
<td>Cell 2 in row 1</td>
</tr>
<tr>
<td>Cell 1 in row 2</td>
<td>Cell 2 in row 2</td>
</tr>
</table>In this example of a table with four cells - two rows containing two cells each - there follow two columns. These columns are implicitly from the number of cells in a row.
Cell 1 in row 1 has an unspecified relationship to cell 2 in row 1, since it is in the same row. Cell 1 in row 1 likewise has a relationship to cell 1 in row 2, since they are both in the first column.
Labels for columns and rows
For describing the content of a column or row a variant on the td element can be used: the th (table header) element. A th element labels the column and row in which it occurs. In the above example, before all other rows a row can be added contain only th elements.
Use the th (table header) element to describe a column or row in a table with relational information.
Guideline R-pd.11.2
Example of use of the th element for two columns (HTML)
<tr>
<th>Activity:</th>
<th>Number of participants:</th>
</tr>This addition makes it (visually) clear what the information in the columns Activity and Number of participants means. On the horizontal axis (row), a visitor will now associate an individual activity with the number of participants.
A label can also be specified for a row by using a table header as the first cell in a row.
Example of use of the th element for a row (HTML)
<tr>
<th>Week 39:</th>
<td>Urban renovation info evening</td>
<td>12</td>
</tr>If a new th cell were to be added to the row of column labels, at the top of the table, would need to be supplemented with an extra cell to retain the implicit column layout. As the column in question only contains th cells, it is sufficient to fill this cell with a space or leave it empty: <td></td>.
Grouping column and row labels
If a row only contains th cells, it is possible to enclose this row using <thead></thead> markup. The thead (table head) element tells browsers that this is a selection with column labels.
When so requested, screen readers can read this section out loud for users who are blind and modern graphic browsers can repeat this section on printed pages if a long table is spread across several pages. When using thead markup, the other rows must be grouped within tbody (table body) markup: <tbody></tbody>.
Group rows containing only th (table header) cells with the thead (table head) element. Group the rest of the table with the tbody (table body) element.
Guideline R-pd.11.3
These grouping elements are also suitable as elements with which layout variations can be applied, by means of CSS (Cascading Style Sheets).
Cells that take up several rows or columns
In the example given, it is quite possible that several activities may take place in the same week. th markup marking this week would then have to apply to several rows of activities. Web developers can use the rowspan attribute to present.
The rowspan attribute (HTML)
<tr>
<th rowspan="2">Week 39:</th>
<td>Urban renovation info evening</td>
<td>12</td>
</tr>
<tr>
<td>Open session of the Environment Commission</td>
<td>16</td>
</tr>
The hazard when using the rowspan attribute is that a cell suddenly takes up the space of several cells, as a result of which the number of cells in the subsequent rows differs from those in other rows. This problem also touches on the use of the colspan attribute, with which a cell can take up several columns.
Of course, a td cell can take up several rows or columns as well - and thereby be associated with more than one row or column. In practice, however, this is seldom necessary. In fact, this can be visually confusing. It is not immediately clear to the visitor what relationship this cell has to other cells.
