CSS - caption-side Property

Quiz

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
caption-side	1.0	8.0	1.0	1.0	4.0

css_reference.htm

Print Page