8000 `subcaption` / nested `caption` tag · Issue #9865 · whatwg/html · GitHub
[go: up one dir, main page]

Skip to content

subcaption / nested caption tag #9865

@Pandapip1

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    addition/proposalNew features or enhancementsneeds implementer interestMoving the issue forward requires implementers to express interest

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0