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.
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;
}
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.
