CSS Basic: caption-side

In CSS, the caption-side property is used to specify the placement of a table caption. The caption is a text description that provides additional information about the table’s content. By default, the caption is placed above the table, but with the caption-side property, you can change its position to either the top or bottom of the table.

Syntax

The syntax for the caption-side property is as follows:

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

The values for the caption-side property are:

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

Example

Let’s consider the following HTML code:

<table>
  <caption>This is a table caption</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

To place the caption below the table, you can use the following CSS:

caption {
  caption-side: bottom;
}

With this CSS, the caption will be displayed at the bottom of the table:

Summary

The caption-side property in CSS allows you to control the placement of a table caption. By default, the caption is positioned above the table, but with the caption-side property, you can change it to be either at the top or bottom of the table. This property provides flexibility in designing and styling tables, allowing you to present information in a visually appealing manner.

If you are looking for reliable VPS hosting solutions in the Hong Kong, consider Server.HK. With our top-notch VPS services, you can ensure high performance and stability for your website or application.