DEV Community

loading...
Cover image for  HTML Elements, the `caption` disagreement

HTML Elements, the `caption` disagreement

icyjoseph profile image Joseph Updated on ・3 min read

Recently I wanted to build a table with double captions, one at the top and one at the bottom.

An HTML Table has a lot of elements that make it up, for example:

thead, defines a set of rows defining the head of the columns of the table.

tfoot, defines a set of rows summarizing the columns of the table.

And there is an HTML element to caption a table.

caption specifies the caption (or title) of a table

So I thought, I'll just put two of them and position them with CSS.

<table>
   <caption class="top">
     first
  </caption>
  <caption class="bottom">
     second
  </caption>
  <thead>
    <tr>
      <th>hello</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>world</td>
    </tr>
  </tbody>
</table>

The caption element is so convenient that, to position it, there is a CSS rule we can use.

.top {
    caption-side: top; 
}

.bottom {
    caption-side: bottom;
}

top is the initial-value for caption-side.

All set and done, I pushed my changes and prepared to bike home. However on my way down to my bike, I started to check how the solution looked like on the phones I have available. Chromium based (Chrome and Brave) looked alright. Safari, check.

Only Firefox was left, which is usually a very strict browser when it comes to HTML semantics, but I thought, double captions should be fine. However, this solution did not work on Firefox.

Here is a very simplified codepen, open it on Chrome, works fine, but Firefox, does not play along. Or perhaps am I playing foul?

Firefox only renders the first caption tag. The rest of tags, all have size 0x0 and have perspective-origin and transform-origin, set to 0px 0px.

A little bizarre behavior is that if you nest a caption within a caption, the browser flattens them in the DOM.

Also if the nested caption has a different caption-side, Chrome respects the CSS declaration.

Chrome Version 85.0.4183.121

Firefox Browser for Developers, version 82.0b6 (64-bit)

I did a few tests on IE 11, using Browserling, and IE is on the rendering many captions side. Though I didn't test nesting captions, I reckon it should work fine.

So who's right?

The HTML Living Standard, says:

Contexts in which this element can be used:

As the first element child of a table element.

Strictly speaking then, there should not be a possibility to have multiple captions.

The same is stated in the HTML5 Recommended specification.

The gold nugget lies in the HTML 4.01 Specification, which says:

A TABLE element may only contain one CAPTION element.

So that's the root of the behavior shown by Firefox.

Interestingly enough the HTML 4.01 also says that one should use the summary tag for table, this use case is deprecated and instead the summary tag is used instead with the details tag.

The [HTML 5 Recommended] specification also refers to the table model, where it states:

In addition to cells, columns, rows, row groups, and column groups, tables can have a caption element associated with them. This gives the table a heading, or legend.

Again, a caption element is the language used. So it makes sense to expect only one caption.

After finding this out, I decided to change my design and markup instead of forcing a workaround.

I think if you really wanted to hack this, you'd have to change the display property of the caption and then try to position your content with transform, but I wouldn't recommend it.

Happy coding!

Discussion

pic
Editor guide
Collapse
alohci profile image
Nicholas Stimpson

There's a few points here.

  1. Yes, Firefox doesn't support multiple captions. It should, CSS 2.1 has been clear about this since 2006.. Still, Chrome doesn't implement everything in CSS 2.1 either. They'll always be bugs. I guess. Table layout is notorious, it's apparently a viper's nest of strange and often poorly documented behaviours, and browser maintainers don't want to touch it, nor do spec writers want to try and sort it out.

  2. The HTML content model rules, which state that it's only conforming for there to be one caption per table, should not have any impact on how browsers handle mark-up, which is always defined elsewhere.

  3. HTML 4.01 says that one should use the summary attribute for table, not the summary tag (or more correctly, element). The summary attribute was dropped because, since browsers never rendered it visually, it was horribly misused, harming the accessibility it was designed to help. It was felt that putting the information in the caption element, which is rendered visually, would result in a better experience for both sighted and non-sighted users.

  4. The HTML5 specification's HTML syntax parsing rules do not allow the nesting of captions , and I can't find any browser including Chrome, that does nest them. I suggest you recheck that. If you want to find out what browsers actually do with nested captions, you'd need to either use HTML5's XML syntax, or construct the nested captions with JavaScript.

Collapse
icyjoseph profile image
Joseph Author

Ah, somehow I saw the captions being nested, just tried it again and the tree is flattened :) Fixing that up! Thanks for the contribution!

Collapse
icyjoseph profile image
Joseph Author

Just realized that putting <caption> in the title leads renders a blank.