title: What HTML5 markup for grouping headings in a table?
body: <p>I have a table where the data rows are grouped into categories.</p>
  
  <p>Currently I've styled them like this:</p>
  
  <p><img src="https://i.stack.imgur.com/3HPH9.png" alt="Table of 4 columns with 2 groups of rows. Each group has an extra row with a bold label/heading."></p>
  
  <p>Currently those two group headers ("Baseline" and "Performer") are simply an extra <code>&lt;TR&gt;</code> with a col-spanning <code>&lt;TD&gt;</code>. This makes me feel dirty.</p>
  
  <p>I want to get rid of that <code>&lt;thead&gt;</code> at the very top, and incorporate the headings into each group header. I understand I can't have multiple <code>&lt;thead&gt;</code> elements in a table, and there is no such thing as a <code>&lt;tgroup&gt;</code>.</p>
  
  <p>I don't want to break the table into multiple tables as there are different ways of sorting the complete set of data (e.g. the table could be grouped by Category instead).</p>
  
  <p>What markup should I use to:</p>
  
  <ol>
  <li>hide/dispose/delete the top-most table header</li>
  <li>insert the relevant headings into each group heading</li>
  <li>still be accessible?</li>
  </ol>