loading...

TIL: caption-side controls the position of a table caption

stefanjudis profile image Stefan Judis Originally published at stefanjudis.com on ・2 min read

Today I came across a tweet by CSS-Tricks. It shares the behavior of the CSS property caption-side. I've never seen caption-side before.

The property can be used when you're dealing with HTML tables. Tables could potentially include a caption element. The clue with caption elements is that they have to be the first element in the table.

This rule makes them usually appear in the top region of the table and gives no options for a different position.

<table>
  <caption>Populations of cities</caption>
  <thead>
    <tr>
      <th>City</th>
      <th>Population</th>
    </tr>
  </thead>
  <tr>
    <td>Berlin</td>
    <td>1</td>
  </tr>
  <tr>
    <td>New York City</td>
    <td>2</td>
  </tr>
</table>  

It turns out that you can use the caption-side CSS property to move the position of the caption element somewhere else. Values that you can safely use today are unfortunately only top and bottom. right, left and a few others are available but not supported cross-browser.

The following lines of CSS can change the position of the caption element to the bottom even though it's the first element inside of the table! 🎉

table {
  /* moves the caption to the bottom */
  caption-side: bottom;
}

Visualisation of the caption CSS property including two tables: one with the caption in the top region (caption-side: top) and one with the caption in the bottom region (caption-side: bottom)

If you want to read more about the caption-side property, head over to MDN or CSS-Tricks.

Additionally, if you want to see it in action, you can have a look at this CodePen.

Posted on by:

stefanjudis profile

Stefan Judis

@stefanjudis

DevRel at Contentful. In love with web performance, new technologies, and accessibility – all the good stuff ✌️.

Discussion

pic
Editor guide