CSS Caption-side

CSS caption-side Property: Position Table Captions

The CSS caption-side property is used to specify the placement of a table’s caption. A table caption is a title or description for a table, and by default, it appears above the table. However, with the caption-side property, you can control whether the caption appears at the top or bottom of the table.

Syntax

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

Values

  • top: Places the caption above the table (default).
  • bottom: Places the caption below the table.
  • initial: Sets the property to its default value (top).
  • inherit: Inherits the property value from its parent element.

Example

Here is an example demonstrating the use of caption-side with a table:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Caption-side Example</title>
  <style>
    table {
      width: 50%;
      border-collapse: collapse;
      margin: 20px auto;
    }

    table, th, td {
      border: 1px solid black;
    }

    caption {
      caption-side: bottom;
      font-size: 1.2em;
      font-weight: bold;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <table>
    <caption>Monthly Sales Report</caption>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1200</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$1500</td>
    </tr>
  </table>
</body>
</html>

Try It Now

Explanation

  1. HTML Structure:
    • The <table> element contains rows (<tr>) and cells (<th> for headers, <td> for data).
    • The <caption> element provides a title for the table.
  2. CSS Styling:
    • caption-side: bottom;: This moves the caption to the bottom of the table.
    • Additional styles (font-size, font-weight, margin-top) are applied to make the caption more prominent.

Points to Remember

  • The caption-side property only applies to the <caption> element of a table.
  • It enhances table readability by placing the caption where it best fits the context or design.
  • Default placement is top, but using bottom can be useful for certain types of data presentation.