CSS Reference Property

caption-side

The caption-side property specifies the position of a table’s (<table>) caption (caption) with respect to the table itself. It specifies which side of the table the caption is to be positioned at.

Using caption-side, a table caption can be positioned above or below the table. Prior to CSS 2.1, two values left and right were proposed to position a caption on the left and right sides of a table, respectively. Those values were removed from the final 2.1 specification and are a non-standard today.

table-caption
Diagram of a table with a caption above it.

Trivia & Notes

A table caption is used to provide a short heading for the table—kind of like a title or a short description. It should now, however, be used to describe a table’s structure, the table summar attribute is more suitable for that. It is inserted after the opening <table> tag, and should always be the first child of a table. You can change its position in the table using the caption-side property.

To align caption content horizontally within the caption box, use the text-align property. Read more about the caption element in this entry on MDN.

Official Syntax

  • Syntax:

    caption-side: top | bottom | inherit 
  • Initial: top
  • Applies To: ‘table-caption’ elements
  • Animatable: no

Notes

Two values, left and right, were proposed for CSS 2. Both values were removed in CSS 2.1 and are now non-standard.

Values

top
Positions the caption above the table.
bottom
Positions the caption below the table.
inherit
Inherits the caption position from the parent’s caption position.

Examples

caption {
    caption-side: bottom;
    text-align: left;
}

.statistics-table caption {
    caption-side: top;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The caption-side property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.

Notes

The two non-standard left and right values are supported in Firefox.

Further Reading

Written by

Last updated February 4, 2015 at 3:01 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.