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></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> </thead> <tbody> <tr> <th scope="row">Morning</th> <td rowspan="2">Work</td> <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
Enclose the first row of the table in a <thead>
element.