Element of
Tables
What does <thead> do?
The <thead> element is used to identify one or more rows of a table that contain column labels rather than table data.
Display
inline

Code Example

<table>
  <caption>The Three Most Popular JavaScript Libraries</caption>
  <thead>
    <tr>
      <th>Library</th>
      <th>jQuery</th>
      <th>Bootstrap</th>
      <th>Modernizr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Market Share</td>
      <td>96.1%</td>
      <td>17.0%</td>
      <td>14.3%</td>
    </tr> 
    <tr>
      <td>Absolute Usage</td>
      <td>70.4%</td>
      <td>12.4%</td>
      <td>10.5%</td>
    </tr>
  </tbody> 
  <tfoot>
    <tr>
      <td colspan="4"><em>Market Share</em> refers to the percentage of sites using any JavaScript library that use the specified library. <em>Absolute Usage</em> is the percent of websites surveyed, including those that use no JavaScript libraries, that use the specified library. All data comes from <a href="https://w3techs.com/technologies/overview/javascript_library/all" target="_blank">W3Techs</a> and was accurate in June of 2016.</td>
    </tr>
  </tfoot>
</table>
The Three Most Popular JavaScript Libraries
Library jQuery Bootstrap Modernizr
Market Share 96.1% 17.0% 14.3%
Absolute Usage 70.4% 12.4% 10.5%
Market Share refers to the percentage of sites using any JavaScript library that use the specified library. Absolute Usage is the percent of websites surveyed, including those that use no JavaScript libraries, that use the specified library. All data comes from W3Techs and was accurate in June of 2016.

How to Use <thead>

The <thead> element is used to identify one or more table rows that contain column labels rather than data. It must be a direct child of a <table> element and appear after the table <caption> and any <colgroup> elements. In addition, <thead> must also before any <tbody> or <tfoot> elements. It's important to note that each table may have only one <thead> element. If you happen to need two rows for column headings, add both <tr> elements to a single <thead> element like this:

<!--Don't do this--> <table>   <thead>     <tr>       <th colspan="2">Company A</th>       <th colspan="2">Company B</th>     </tr>   </thead>   <thead>     <tr>       <th>Founded</th>       <th>Annual Sales</th>       <th>Founded</th>       <th>Annual Sales</th>     </tr>   </thead>   <tr>     <td>2008</td>     <td>$47,000,000</td>     <td>2004</td>     <td>$27,000,000</td>   </tr> </table>  <!--Do this instead--> <table>   <thead>     <tr>       <th colspan="2">Company A</th>       <th colspan="2">Company B</th>     </tr>     <tr>       <th>Founded</th>       <th>Annual Sales</th>       <th>Founded</th>       <th>Annual Sales</th>     </tr>   </thead>   <tr>     <td>2008</td>     <td>$47,000,000</td>     <td>2004</td>     <td>$27,000,000</td>   </tr> </table> 

Let's see what your browser makes of that misuse of the <thead> element.

Company A Company B
Founded Annual Sales Founded Annual Sales
2008 $47,000,000 2004 $27,000,000
Company A Company B
Founded Annual Sales Founded Annual Sales
2008 $47,000,000 2004 $27,000,000

In most cases, your browser will handle this semantic error without any trouble. However, it still doesn't pass as valid HTML and will be flagged as invalid by HTML validation services.

Building a Semantically-Rich Table

<tfoot> and <tbody> are siblings of the <thead> element. Use all three to provide rich information to browser, crawlers, and assistive technologies about the meaning of the content found in each part of an HTML <table>.