totn CSS

CSS: caption-side property

This CSS tutorial explains how to use the CSS property called caption-side with syntax and examples.

Description

The CSS caption-side property defines the position of a table-caption.

Syntax

The syntax for the caption-side CSS property is:

caption-side: value;

Parameters or Arguments

value

The position of the table-caption. It can be one of the following:

Value Description
top Caption box appears above the table
caption-side { caption-side: top; }
bottom Caption box appears below the table
caption-side { caption-side: bottom; }
left Caption box appears to the left of the table
caption-side { caption-side: baseline; }
right Caption box appears to the right of the table
caption-side { caption-side: sub; }
inherit Element will inherit the caption-side property from its parent element
caption-side { caption-side: inherit; }

Note

Browser Compatibility

The CSS caption-side property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 8+ (IE 8+)
  • Opera
  • Safari (WebKit)

Example

We will discuss the caption-side property below, exploring examples of how to use this property in CSS.

Below is an HTML page that uses the <caption> element. We can use the caption-side property to position where the caption will be displayed relative to the table.

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <caption>This is the caption for the table</caption>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
    <th>Column 3 Heading</th>
  </tr>
  <tr>
    <td>Data in Column 1, Row 2</td>
    <td>Data in Column 2, Row 2</td>
    <td>Data in Column 3, Row 2</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 3</td>
    <td>Data in Column 2, Row 3</td>
    <td>Data in Column 3, Row 3</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 4</td>
    <td>Data in Column 2, Row 4</td>
    <td>Data in Column 3, Row 4</td>
  </tr>
</table>
</body>
</html>

Above Table

If you wanted to have the caption box to appear above the table, you would set the caption-side property to top for the caption element:

caption { caption-side: top; }

Below Table

To display the caption box below the table, you would set the caption-side property to bottom for the caption element:

caption { caption-side: bottom; }

Left of Table

To display the caption box to the left of the table, you would set the caption-side property to left for the caption element:

caption { caption-side: left; }

Right of Table

To display the caption box to the right of the table, you would set the caption-side property to right for the caption element:

caption { caption-side: right; }
Share on: