Tutorials


CSS caption-side property


The caption-side property in CSS is used to specify the position of a table caption relative to the table it describes. This property helps in positioning the caption, which typically provides a title or description for the table content.

Syntax

table {
  caption-side: value;
}
  • table: The HTML table element to which you want to apply the caption-side setting.
  • value: The position where the caption should be placed relative to the table.

Values

  1. top:

    • Description: Positions the caption at the top of the table.
    • Example: caption-side: top;

  2. bottom:

    • Description: Positions the caption at the bottom of the table.
    • Example: caption-side: bottom;

  3. left (Less common, but valid):

    • Description: Positions the caption on the left side of the table.
    • Example: caption-side: left;

  4. right (Less common, but valid):

    • Description: Positions the caption on the right side of the table.
    • Example: caption-side: right;

Usage Example

Here’s how to use the caption-side property in CSS:

Example

/* Position caption at the top of the table */
table.top-caption {
  caption-side: top; /* Caption is positioned above the table */
  border: 1px solid black; /* Add a border to the table */
}

table.bottom-caption {
  caption-side: bottom; /* Caption is positioned below the table */
  border: 1px solid black; /* Add a border to the table */
}

caption {
  font-weight: bold; /* Style the caption text */
  padding: 5px; /* Add padding around the caption text */
}

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Caption Side Example</title>
  <style>
    /* Include the CSS from the example above here */
  </style>
</head>
<body>
  <table class="top-caption">
    <caption>Table Caption at Top</caption>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>

  <table class="bottom-caption">
    <caption>Table Caption at Bottom</caption>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</body>
</html>

Explanation:

  1. table.top-caption:

    • Uses caption-side: top; to position the caption above the table. The caption appears at the top of the table as per the specified style.

  2. table.bottom-caption:

    • Uses caption-side: bottom; to position the caption below the table. The caption appears at the bottom of the table.

Important Points

  1. Caption Element:

    • The caption-side property affects the <caption> element of a table. The <caption> tag is used to define the caption for the table and must be the first child of the <table> element.

  2. Compatibility:

    • The caption-side property is well-supported in modern browsers. However, it’s a good practice to test across different browsers to ensure consistent behavior.

  3. Positioning Options:

    • While top and bottom are commonly used, left and right are less commonly seen. The use of left and right can be less predictable and may not always produce the desired effect depending on the table's layout and content.

  4. Inherit Property:

    • The caption-side property is not inherited. It only affects the specific table it is applied to.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about