CSS - caption-side Property



CSS caption-side property specifies where the caption of a table should be displayed (top or bottom).

Syntax

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

Property Values

Value Description
top It places the caption above the table. Default.
bottom It places the caption below the table.
initial It sets the property to its default value.
inherit It inherits the property from the parent element.

Examples of CSS Caption Side Property

The following examples explain the caption-side property with different values.

Caption Side Property with Top Value

To place the caption of a table above it, we use the top value of the caption-side property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border-collapse: collapse;
         padding: 10px;
         background-color: lightgreen;
         text-align: center;
      }

      #example {
         caption-side: top;
      }
   </style>
</head>

<body>
    <h2>
        CSS caption-side property
    </h2>
    <p>
        caption-side: top
    </p>
    <table id="example" border="2">
         <caption>
             <strong>
                Table 2.1 Subject Toppers
             </strong>
         </caption>
         <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Ankit</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>Priya</td>
            <td>Physics</td>
            <td>87</td>
         </tr>
         <tr>
            <td>Kumar</td>
            <td>Chemistry</td>
            <td>92</td>
         </tr>
    </table>
</body>

</html>

Caption Side Property with Bottom Value

To place the caption of a table below it, we use the bottom value of the caption-side property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border-collapse: collapse;
         padding: 10px;
         background-color: lightgreen;
         text-align: center;
      }

      #example {
         caption-side: bottom;
      }
   </style>
</head>

<body>
    <h2>
        CSS caption-side property
    </h2>
    <p>
        caption-side: bottom
    </p>
    <table id="example" border="2">
         <caption>
             <strong>
                Table 2.1 Subject Toppers
             </strong>
         </caption>
         <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Ankit</td>
            <td>Maths</td>
            <td>95</td>
         </tr>
         <tr>
            <td>Priya</td>
            <td>Physics</td>
            <td>87</td>
         </tr>
         <tr>
            <td>Kumar</td>
            <td>Chemistry</td>
            <td>92</td>
         </tr>
    </table>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
caption-side 1.0 8.0 1.0 1.0 4.0
css_reference.htm
Advertisements