Table Head

In the last exercise, the table’s headings were kept inside of the table’s body. When a table’s body is sectioned off, however, it also makes sense to section off the table’s column headings using the <thead> element.

<table>

<thead>

<tr>

<th scope="col">Saturday</th>

<th scope="col">Sunday</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">Morning</th>

<td rowspan="3">Relax</td>

</tr>

<tr>

<th scope="row">Afternoon</th>

</tr>

<tr>

<th scope="row">Evening</th>

<td>Dinner</td>

</tr>

</tbody>

</table>

In the example above, the only new element is <thead>. The table headings are contained inside of this element. Note that the table’s head still requires a row in order to contain the table headings.

Additionally, only the column headings go under the <thead> element. We can use the scope attribute on <th> elements to indicate whether a <th> element is being used as a "row" heading or a "col" heading.

Instructions

1. Enclose the first row of the table in a <thead> element.