HTML <thead> table head Tag Reference

Back to index of HTML/xHTML tags grouped by: « Family / « Importance / « A-Z

The thead HTML tag means table head, and is an optional tag which can enclose the top row of a table to define the cells as column headers.

Use it whenever you have a table where the top row consists of column headings which describe the data below.

The <thead> HTML/xHTML tag

The thead tag may be included within any table tag, and it must come directly after the opening <table> tag. It encloses the first row of a table, and contains <th> column header cells, which define the data in the <td> table data cells below.

When to use the <thead> tag (semantic use)

You should use <thead> when your table requires column headers to define the type of data in that column. For example you might have a column containing a list of products, and a column containing a list of prices, so you would use a <thead> tag around the first row, with column headers Product and Price.

It's valid in all current versions of HTML and xHTML, and it should always have a closing </thead> tag.

Example of <thead> tag use

The <thead> section comes after the <caption> and before the first <tbody>.

It is possible to have several <thead> sections inserted in the table, which may be useful in long tables.

Here's a table using all the tags, including <thead>, <tbody>, <tfoot>, with both <td> table data cells and <th> table header cells, and also a <caption> for good measure.

<table>

<caption>Your order</caption>
<thead>

<tr>

<th>ID</th>
<th>Product</th>
<th>Unit price</th>
<th>Units ordered</th>
<th>Total</th>

</tr>

</thead>
<tfoot>

<tr>

<th style="text-align: right;" colspan="4">Total price</th>
<td>£10.85 </td>

</tr>

</tfoot>
<tbody>

<tr>

<th>1</th>
<td>Coffee</td>
<td>£1.50</td>
<td>3</td>
<td>£4.50</td>