Two headers
Designing with two headers
For tables with a simple row header and a simple column header, use the scope attribute to identify header cells.
To make information accessible to the widest possible audience:
- Convert complex tables into one or more simple tables
- Convert a table to a list if the data is simple
Good example: Table with an offset column of header cells
In this table, column 2 contains the header cells for the row. The cells in column 2 use <th> elements and the scope="row" attribute. The cells in row 1 are also marked up with <th> and use scope="col".
Example begins
| ID | Name | Jan | Feb | March |
|---|---|---|---|---|
| 355 | John | 3 | 2 | 0 |
| 561 | Andy | 0 | 2 | 3 |
| 765 | Michelle | 2 | 0 | 0 |
Example ends
View HTML
Code begins
<table class="table table-bordered table-hover">
<caption>
Sick days taken in the first quarter
</caption>
<thead>
<tr>
<th scope="col"><abbr title="Identification">ID</abbr></th>
<th scope="col">Name</th>
<th scope="col">Jan</th>
<th scope="col">Feb</th>
<th scope="col">March</th>
</tr>
</thead>
<tbody>
<tr>
<td>355</td>
<th scope="row">John</th>
<td>3</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>561</td>
<th scope="row">Andy</th>
<td>0</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>765</td>
<th scope="row">Michelle</th>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
Code ends
Good example: Convert table into lists
Example begins
| ID | Name | Jan | Feb | March |
|---|---|---|---|---|
| 355 | John | 3 | 2 | 0 |
| 561 | Andy | 0 | 2 | 3 |
| 765 | Michelle | 2 | 0 | 0 |
Example ends
Example begins
Sick days taken in first quarter
January
- John (ID #355): 3
- Andy (ID #561): 0
- Michelle (ID#765): 2
February
- John (ID #355): 2
- Andy (ID #561): 2
- Michelle (ID#765): 0
March
- John (ID #355): 0
- Andy (ID #561): 3
- Michelle (ID#765): 0
Example ends