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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
caption-side: top | bottom | initial | inherit;
caption-side: top | bottom | initial | inherit;
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.