CSS caption-side Property

The caption-side property defines the place of HTML <caption> element, used on HTML tables. The <caption> tag is used to give a title for a table. The title (caption) of the table can be placed at the bottom or at the top of the table.

The caption-side property has two standardized values: top and bottom. The "top" value defines that the caption box should be placed above the table. The "bottom" 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 four values were proposed in CSS 2, but not included in CSS 2.1 specification.

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

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

Syntax

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 caption box.

Example

<!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>

In this example find the difference of the two values.

Example

<!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>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>

Values

Value Description
top Places the caption above the table. This is the default value of this property.
bottom Places the caption below the table.
left Places the caption on the left side of the table.
right Places the caption on the right side of the table.
top-outside Places the caption above the table. The width and horizontal alignment behavior are not bound to the table's horizontal layout.
bottom-outside Places the caption below the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

1.0+ 8.0+ 12.0+ 1.0+ 1.0+ 4.0+



Related articles