What shoul I use for marking table subheadings?

Hello,
Are there any elements other that thead, tbody and tfoot that I can use for grouping rows in a table. I know that I can use tbody more that once, but what if I want to include some kind of header for that group?

Usually this is done with one <td colspan=“x”>Table subheading</td> element, but I’m wondering what would be semantic approach?

I think the best approach would be something like this:

<th colspan="x" scope="colgroup">Table subheading</th>

You are probably looking for scope=“rowgroup”. See the example below. I’m not sure how well this is supported by browsers.

<table>
  <thead>
    <tr>
      <th scope="col">Data type</th>
      <th scope="col">Item 1 header</th>
      <th scope="col">Item 2 header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="3">Data group 1</th>
    </tr>
    <tr>
      <th scope="row">Data type 1.1</th>
      <td>Data type 1.1 for item 1</td>
      <td>Data type 1.1 for item 2</td>
    </tr>
    <tr>
      <th scope="row">Data type 1.2</th>
      <td>Data type 1.2 for item 1</td>
      <td>Data type 1.2 for item 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="3">Data group 2</th>
    </tr>
    <tr>
      <th scope="row">Data type 2.1</th>
      <td>Data type 2.1 for item 1</td>
      <td>Data type 2.1 for item 2</td>
    </tr>
  </tbody>
</table>

Browsers don’t really have anything to do with scrope. It’s intended for assistive technologies, such as screen readers, but AFAIK they don’t support scope. The rowspan and colspan attributes make it very difficult to judge which row(group) or column(group) a particular cell belongs to in the generic case.

Screen reader support for the headers attribute seems to be much better. The downside with that is that it’s a lot more code to write for the author. :slight_smile:

<th colspan="x"> is the appropriate choice here. Whether you use scope="rowgroup" or assign an id (and use headers on the data cells) is up to you.

(Christian, I think you meant to use colspan="3" rather than span="3", right?)

Oops, right. I have to stop coding at 2 in the evening :wink:

Thank you.
So, nobody recommends using multiple tbodies in this case? Would it be incorrect if I used it?

Yes, I think you should use multiple tbodies, just as in Christian’s example. :slight_smile:

Then use a <th colspan="x"> in the first row of each tbody.

It is not 2AM here right now but I didn’t notice them :slight_smile: Silly me

Thank you guys