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

CSS caption-side Property

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

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 4.0+

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?