Rendering of multiple captions in an HTML table

[karlcow]

What is the issue with the HTML Standard?

This is an issue to determine if

1. the specification needs to be clarified or changed
2. to align the browsers on the same behavior.

Currently Firefox shows only one caption while Chrome and Safari show multiple, changing the layout.

Code:

Let's make a table with multiple captions:

<table>
  <caption>caption 1</caption>
  <caption>caption 2</caption>
  <caption>caption 3</caption>
  <tbody>
    <tr>
      <td>body</td>
    </tr>
  </tbody>
</table>

Rendering:

Browser	Rendering
Safari Technology Preview 212 20621.1.10.111.2	all captions shown
Firefox Nightly 136.0a1 13625.1.25	only the first one
Google Chrome Canary 134.0.6985.0 6985.0	all captions shown

Specification:

https://html.spec.whatwg.org/multipage/tables.html#the-caption-element

As the first element child of a table element.

The table element is defined as:
https://html.spec.whatwg.org/multipage/tables.html#the-table-element

In this order:

1. optionally a caption element,
2. followed by zero or more colgroup elements,
3. followed optionally by a thead element,
4. followed by either zero or more tbody elements or one or more tr elements,
5. followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

I wonder if the requirement is one and only caption if it should be clearly mentioned here. The a caption is vague.

Then there is also this section which implies only one.
https://html.spec.whatwg.org/multipage/tables.html#dom-table-caption

The caption IDL attribute must return, on getting, the first caption element child of the table element, if any, or null otherwise.
On setting, the first caption element child of the table element, if any, must be removed, and the new value, if not null, must be inserted as the first node of the table element.

The createCaption() method must return

• the first caption element child of the table element, if any;
• otherwise a new caption element must be table-created, inserted as the first node of the table element, and then returned.

The deleteCaption() method must remove the first caption element child of the table element, if any.

Compatibility

This is a bit of the dark part. It would be good to know, how many tables out there have multiple caption elements with different content. If it's very minor then probably, Safari and Chrome should align to Firefox behavior. If there are a significant number of them, changing the behavior of Chrome/Safari might loose information.

Probably a query could help with that.

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=286661

[domenic]

I wonder if the requirement is one and only caption if it should be clearly mentioned here. The a caption is vague.

This is a conformance requirement and irrelevant to user agent implementations.

Then there is also this section which implies only one.
https://html.spec.whatwg.org/multipage/tables.html#dom-table-caption

These are requirement on what the JavaScript APIs do and are irrelevant to rendering.

---

Table rendering is specified in https://drafts.csswg.org/css-tables-3/ (in combination with https://html.spec.whatwg.org/#tables-2), so this is probably best as a CSSWG issue. Skimming, https://drafts.csswg.org/css-tables-3/#bounding-box-assignment seems possible relevant.

[karlcow]

Thanks @domenic
Hmm indeed.

And also uncertainty such as with funny things, still in HTML such as:

When a table element is the only content in a figure element other than the figcaption, the caption element should be omitted in favor of the figcaption.

which is another constraint. It doesn't seem taken into account on the CSS-tables-3 side.

And it's not implemented by any browsers.

<figure>
  <figcaption>figure figcaption</figcaption>
  <table>
    <caption>table caption</caption>
    <tr>
      <td>body</td>
    </tr>
  </table>
</figure>

They all display both.

caption element should be omitted

In the rendering? In the DOM? or is it just an authoring recommendation?

[karlcow]

Yeah reading the CSS spec, there is probably a bug in Gecko in fact.

[karlcow]

Covered by https://wpt.fyi/results/css/css-tables/caption-side-1.html?label=master&label=experimental&aligned&q=caption

[karlcow]

We probably can close.

[domenic]

which is another constraint.

Another authoring conformance constraint, telling web developers not to add certain tags to their markup :)