CSS caption-side Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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	It makes the property use its default value.	Play it »
inherit	It inherits the property from its parents element.