Search code examples
htmlhtml-tablesemantic-markupscreen-readers

HTML table semantics: <thead> with multiple <tr>


If i define a <thead> like this:

<thead>
  <tr>
    <th colspan=3>Category 1</th>
    <th colspan=2>Category 2</th>
  </tr>
  <tr>
    <th>Sub-cat 1</th>
    <th>Sub-cat 2</th>
    <th>Sub-cat 3</th>
    <th>Sub-cat 4</th>
    <th>Sub-cat 5</th>
  </tr>
</thead>

Does this structure semantically separate the categories/sub-categories correctly?

I know that visually it will look good, but I am unsure how this would look to a screen reader or to W3C specs in general.


Solution

  • Browsers can use thead, tbody, tfooter to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, thead, tbody, tfooter elements can enable the table header and footer to be printed at the top and bottom of each page. See this for more info: http://www.w3schools.com/tags/tag_thead.asp