[csswg-drafts] [css-tables-3] Rendering of multiple captions in an HTML table (#11627)

karlcow has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-tables-3] Rendering of multiple captions in an HTML table ==
This was initially filed on https://github.com/whatwg/html/issues/10973
but @domenic rightly pointed out that this was more a CSS implementation issue referring to css tables.
I'm just opening and closing to keep a track here. 


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 |

<img width="1726" alt="Image" src="https://github.com/user-attachments/assets/18283813-83ab-4784-894d-2284624144dd" />


## 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



## CSS Tables Specification

In https://drafts.csswg.org/css-tables-3/#table-structure

> Optionally: one or more [table caption](https://drafts.csswg.org/css-tables-3/#table-caption).

Ok there can be more than one table caption. 

https://drafts.csswg.org/css-tables-3/#table-caption
> table-caption (equivalent to HTML: <caption>)
>    Specifies a caption for the table. Table captions are positioned between the table margins and its borders. 


https://drafts.csswg.org/css-tables-3/#caption-side-property seems to allude that Firefox has a bug related to multiple captions.
> Gecko has a bug when dealing with multiple captions. [!Testcase](http://codepen.io/FremyCompany/pen/WrJxwP)

And there is a WPT for it 
https://wpt.fyi/results/css/css-tables/caption-side-1.html?label=master&label=experimental&aligned&q=caption




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11627 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 January 2025 08:48:43 UTC