`subcaption` / nested `caption` tag

[Pandapip1]

What problem are you trying to solve?

I have five or six tables that all display the same type of data and are seperated by status. I would like to do this in a single table so that the columns have a consistent width.

What solutions exist today?

You can use an h2 in between multiple tables. But then the tables have different column widths.

How would you solve it?

New

A nested caption tag (as a first child of a tbody tag) indicates the caption for the specific tbody. It may have a different default style from a caption that isn't a child of a tbody:

<table>
    <caption>Cool data!</caption>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <caption>Status 1</caption>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
    <tbody>
        <caption>Status 2</caption>
        <tr>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 7</td>
            <td>Data 8</td>
        </tr>
    </tbody>
</table>

Old

A new HTML tag, subcaption, that behaves identically to the caption tag, except it can be placed only after the thead and before the last tbody, but any number of times, and might have different default styling. For example:

<table>
    <caption>Cool data!</caption>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <subcaption>Status 1</subcaption>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
    <subcaption>Status 2</subcaption>
    <tbody>
        <tr>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 7</td>
            <td>Data 8</td>
        </tr>
    </tbody>
</table>

Anything else?

Alternatively, some sort of CSS property could be made to sync columns across tables. I haven't thought about this that much. All I know is that I want to avoid using JS for something this simple.

The presence ot absence of this feature could possibly be used for fingerprinting.

[Crissov]

Instead of

    <subcaption>Status 1</subcaption>
    <tbody>
        <td>Data 1</td>

all of the following, nesting within tbody, would make more structural sense to me:

    <tbody>
        <subcaption>Status 1</subcaption>
        <td>Data 1</td>

    <tbody>
        <caption>Status 1</caption>
        <td>Data 1</td>

    <tbody>
        <h2>Status 1</h2>
        <td>Data 1</td>

[Pandapip1]

I like your second option of tbody caption the best.

[prlbr]

Can you use

<tbody>
  <tr><th colspan='…' scope='rowgroup'>Status 1</th></tr>
  …
</tbody>

instead of a <caption> or <subcaption> element?