<thead> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Tables: Find Out When To Use Them (And When To Avoid)
What does <thead> HTML Tag 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
LibraryjQueryBootstrapModernizr
Market Share96.1%17.0%14.3%
Absolute Usage70.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 ACompany B
FoundedAnnual SalesFoundedAnnual Sales
2008$47,000,0002004$27,000,000
Company ACompany B
FoundedAnnual SalesFoundedAnnual Sales
2008$47,000,0002004$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>.

Adam is a technical writer who specializes in developer documentation and tutorials.