CSS caption-side Property

The caption-side property sets the position of a table caption.

Options are the top or bottom of the table.

By default, the caption is located at the bottom.

Example

#

A table with a caption at the bottom.

Table 1.0 Employees List
Name Position Gender
Alfred Futter Web Designer Male
Nicolas Stuart Web Designer Male
Joseph McGuire Graphic Artist Male
Sarah Mitts Video Edittor Female
Michelle Ranger Data Analyst Female
<style>
.tb { border-collapse: collapse; width: 400px;}
.tb th { background: aliceblue; }
.tb th, .tb td { padding: 5px 7px; border: solid 1px #e7e7e8; }
.tb caption { margin-top: 15px; 
              caption-side: bottom; 
              background: aliceblue;
              color: black;
              padding-left: 10px;
}
</style>

<table class="tb" cellspacing="0">
<caption>Table 1.0 Employees List</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Gender</th>
        </tr>
        <tr>
            <td>Alfred Futter</td>
            <td>Web Designer</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Nicolas Stuart</td>
            <td>Web Designer</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Joseph McGuire</td>
            <td>Graphic Artist</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Sarah Mitts</td>
            <td>Video Edittor</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Michelle Ranger</td>
            <td>Data Analyst</td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

Syntax

caption-side: top | bottom | initial | inherit;

Values

#

Value Description
bottom Default. Caption is below the table
top Caption is placed above the table
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different caption-side values.

Table 1.0 Employees List
Name Position Gender
Alfred Futter Web Designer Male
Nicolas Stuart Web Designer Male
Joseph McGuire Graphic Artist Male
Sarah Mitts Video Edittor Female
Michelle Ranger Data Analyst Female
<style>
  .tbl { border-collapse: collapse; width: 400px; }
  .tbl th { background: aliceblue; }
  .tbl th, .tbl td { padding: 5px 7px; border: solid 1px #e7e7e8; }
  
  .tbl .caption {
    margin: 15px 0;
    caption-side: top;
    background: aliceblue;
    color: black;
    padding-left: 10px;
</style>

<table class="tbl" border="1">
  <caption class="caption">Table 1.0 Employees List</caption>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>Alfred Futter</td>
      <td>Web Designer</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Nicolas Stuart</td>
      <td>Web Designer</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Joseph McGuire</td>
      <td>Graphic Artist</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Sarah Mitts</td>
      <td>Video Edittor</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Michelle Ranger</td>
      <td>Data Analyst</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

Browser support

This table shows when caption-side support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
8.0 Mar 2009
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides