What HTML5 markup for grouping headings in a table?
<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>