<thead> HTML Tag

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>

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.

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 Wood

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