One header
Designing with one header
For simple tables with either row headers or column headers, use the <th> element to mark up the first row or column.
Use the scope attribute to identify the cells the header defines. The scope identifies whether the header applies to a row, a column, or a group of rows or columns. Refer to the Irregular headers section for more details on the scope attribute.
Good example: Simple table with column headers
Example begins
| Date | Time | Meeting description |
|---|---|---|
| Monday | 10:00 am | Status update |
| Tuesday | 2:00 pm | Managers meeting |
| Thursday | 4:00 pm | Team meeting |
Example ends
View HTML
Code begins
<table class="table table-bordered table-hover">
<caption>This week’s meetings</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Meeting description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>10:00 am</td>
<td>Status update</td>
</tr>
[…]
</tbody>
</table>
Code ends
Good example: Simple table with row headers
Example begins
| Date | Monday | Tuesday | Thursday |
|---|---|---|---|
| Time | 10:00 am | 2:00 pm | 4:00 pm |
| Meeting description | Status update | Managers meeting | Team meeting |
Example ends
View HTML
Code begins
<table class="table table-bordered table-hover">
<caption>This week’s meetings</caption>
<tbody>
<tr>
<th scope="row">Date</th>
<td>Monday</td>
<td>Tuesday</td>
<td>Thursday</td>
</tr>
<tr>
<th scope="row">Time</th>
<td>10:00 am</td>
<td>2:00 pm</td>
<td>4:00 pm</td>
</tr>
<tr>
<th scope="row">Meeting description</th>
<td>Status update</td>
<td>Managers meeting</td>
<td>Team meeting</td>
</tr>
</tbody>
</table>
Code ends