What HTML5 markup for grouping headings in a table?

Question

I have a table where the data rows are grouped into categories.

Currently I've styled them like this:

Currently those two group headers ("Baseline" and "Performer") are simply an extra <TR> with a col-spanning <TD>. This makes me feel dirty.

I want to get rid of that <thead> at the very top, and incorporate the headings into each group header. I understand I can't have multiple <thead> elements in a table, and there is no such thing as a <tgroup>.

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).

What markup should I use to:

1. hide/dispose/delete the top-most table header
2. insert the relevant headings into each group heading
3. still be accessible?

Answer 1

You could make Feature Group/Type a column next to the Category column, instead of breaking the rows into sections.

edited to add

In that case I'd make the col-spanning row a th instead of a td. Give it an id attribute like id="baseline", and give an id to the column header as well. Then for the content rows, give the first cell a headers attribute which refers to those ids. This is valid, but the support for headers/id association in screenreaders is a bit inconsistent so you might have to do a bit of testing and tweak it to get a decent result. Usually scope=row/col is sufficient, but headers/id is intended for multiple headers like you have.

If your first cell is a th, give it a scope="row" just to distinguish it from the other th elements. e.g.

<thead>
  <tr><th id="feature">Feature</th><th>Category</th><th>B</th><th>P</th></tr>
</thead>
<tbody>
  <tr><th id="baseline" col-span="4">Baseline</th></tr>
  <tr><th scope="row" headers="baseline feature">Account activity</th><td>Accounts</td><td>59%</td><td>34%</td></tr>
 ...
</tbody>

You can see a more detailed explanation here: http://webaim.org/techniques/tables/data