W3docs
en
Log in

CSS caption-side Property

The caption-side property puts the caption box on the specified side. Learn about values of this property and find some examples.

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 Valuetop
Applies toTable-caption elements.
InheritedNo.
AnimatableDiscrete.
VersionCSS 2.1
DOM Syntaxobject.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

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

ValueDescriptionPlay it
topPlaces the caption above the table. This is the default value of this property.Play it »
bottomPlaces the caption below the table.Play it »
leftPlaces the caption on the left side of the table. A non-standard value supported only by Firefox.
rightPlaces the caption on the right side of the table. A non-standard value supported only by Firefox.
top-outsidePlaces 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-outsidePlaces 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.
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

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