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.

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" 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";

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 “summary” attribute of the <table> tag can be used for this purpose. Insert it after the opening <table> tag. Take into account, that it must be the first child of a table. With the help of the caption-side property, you may change the position of the caption.

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 of the CSS caption-side property:

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

Result

Example of the caption-side property with two 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>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+ 12.0+ 1.0+ 1.0+ 4.0+


Do you find this helpful?

Related articles