whatwg
`subcaption` / nested `caption` tag
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.
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>
Can you use
<tbody>
<tr><th colspan='…' scope='rowgroup'>Status 1</th></tr>
…
</tbody>
instead of a <caption> or <subcaption> element?
The current workaround for this, also documented on MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody#multiple_bodies) and as mentioned above, is to create a row containing one cell with colspan equal to the number of columns.
This has two problems:
- the
colspanneeds to be manually kept in sync - developers need to remember to add a
role=captionattribute for accessibility, which would work by default if using acaptionelement instead.
Also note that neither the mature Display 4 nor the eternally work-in-progress Table 3 module of CSS would currently support a table-caption box within a table-row-group box in a useful manner.
The element generates a table caption box, which is a block box with special behavior with respect to table and table wrapper boxes.
Specifically, the caption-side property is defined only relative to the table grid box, not any table-track-group box.
If this proposal advances for HTML or if any other relevant markup language had this feature, a new issue should be opened over at the CSSWG repository.
PS: If anyone dared to enter that rabbit hole, the number, variety and popularity of (La)TeX table packages exemplifies that some authors really have a need for more complex data table layouts than the HTML+CSS model currently supports.