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.



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

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?