CSS caption-side Property

The caption-side property defines the placement of the HTML <caption> element within an HTML table. The <caption> tag is used to give a title to a table. The title (caption) of the table can be placed at the bottom or at the top of the table.

This property has two standardized values: top and bottom. The top value defines that the caption box should be placed above the table. The bottom value defines that the caption box should be placed below the table.

There are four other values which are not standardized: left, right, top-outside, and bottom-outside. These values were proposed in CSS 2 but were not included in CSS 2.1. They are currently obsolete and supported only by Firefox. They are not recommended for production use.

The caption-side property can also apply to any element whose display property is set to table-caption.

Initial Value	top
Applies to	Table-caption elements.
Inherited	No.
Animatable	Discrete.
Version	CSS 2.1
DOM Syntax	object.style.captionSide = "top";

Caption-side property for a table caption

Use a table caption for setting a short heading to the table, something like a short description. This will describe the structure of a table. The <caption> element should be used for this purpose. It must be placed immediately after the opening <table> tag, making it the first child of the table. (Note: The summary attribute on the <table> tag is deprecated in HTML5 and should not be used.) With the help of the caption-side property, you may change the position of the caption.

Syntax

Syntax of CSS caption-side Property

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

Here is an example where the "top" value is applied. It puts the caption above the table.

Example of the CSS caption-side property:

Example of CSS caption-side Property with top value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
      }
      .top caption {
        caption-side: top;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Result

![CSS caption-side Property](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Example of the caption-side property with two values:

Example of CSS caption-side Property with top and bottom values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #ccc;
      }
      .top caption {
        caption-side: top;
      }
      .bottom caption {
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
        padding: 3px;
      }
      td {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

When to use caption-side

By default the caption appears above the table (caption-side: top), which is the conventional place for a table title. Set it to bottom when the caption reads more like a footnote or a data source — for example "Figure 1: Quarterly revenue (in thousands)" placed under a chart-like table. The choice is purely visual; the <caption> stays the first child of the table in the markup either way, so screen readers announce it as the table's accessible name regardless of where it is painted.

Things to keep in mind

Markup position is fixed, painting is not. Even when you use caption-side: bottom, the <caption> must remain the first child of <table>. CSS moves only where the box is drawn, not where the element lives in the DOM.
Stick to top and bottom. The left, right, top-outside, and bottom-outside values were dropped from CSS 2.1 and are only honored in Firefox. In every other browser they are ignored and fall back to top, so avoid them in production.
It is not inherited. Although the property applies to table-caption boxes, it is not inherited, so setting it on a wrapper does not affect nested tables unless you target their captions directly.
No layout box of its own to size. caption-side cannot change the caption's width or text alignment — use text-align and width on the <caption> for that.

Browser support

The standardized top and bottom values are supported in all modern browsers, including Internet Explorer 8 and later. The non-standard values are supported only in Firefox.

Values

Value	Description	Play it
top	Places the caption above the table. This is the default value of this property.	Play it »
bottom	Places the caption below the table.	Play it »
left	Places the caption on the left side of the table. A non-standard value supported only by Firefox.
right	Places the caption on the right side of the table. A non-standard value supported only by Firefox.
top-outside	Places the caption above the table. The width and horizontal alignment behavior are not bound to the table's horizontal layout. A non-standard value supported only by Firefox.
bottom-outside	Places the caption below the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout. A non-standard value supported only by Firefox.
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Practice

What does the 'caption-side' property in CSS do?

It sets the position of the caption at the top of the table.It sets the position of the caption at the bottom of the table.It styles the caption with a specific font color.It enlarges the size of the caption text.

border-collapse — choose whether table borders merge into a single line or stay separate.
empty-cells — control whether borders and backgrounds render on empty cells.
table-layout — switch between automatic and fixed column-width algorithms.
text-align — align the caption's text within its box.