HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

CSS caption-side

The caption-side property in CSS specifies the placement of a table caption.

There are four possible values for the caption-side property:

Let's see some examples of how the caption-side property works:

Result:
Caption at the top
Row 1, cell 1 Row 1, cell 2
Row 2, cell 1 Row 2, cell 2
<table>
  <caption style="caption-side: top;">Caption at the top</caption>
  <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
  </tr>
  <tr>
    <td>Row 2, cell 1</td>
    <td>Row 2, cell 2</td>
  </tr>
</table>

In this example, the caption is placed at the top of the table.

Result:
Caption at the bottom
Row 1, cell 1 Row 1, cell 2
Row 2, cell 1 Row 2, cell 2
<table>
  <caption style="caption-side: bottom;">Caption at the bottom</caption>
  <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
  </tr>
  <tr>
    <td>Row 2, cell 1</td>
    <td>Row 2, cell 2</td>
  </tr>
</table>

In this example, the caption is placed at the bottom of the table.

Result:
Caption to the left
Row 1, cell 1 Row 1, cell 2
Row 2, cell 1 Row 2, cell 2
<table>
  <caption style="caption-side: left;">Caption to the left</caption>
  <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
  </tr>
  <tr>
    <td>Row 2, cell 1</td>
    <td>Row 2, cell 2</td>
  </tr>
</table>

In this example, the caption is placed to the left of the table.

Result:
Caption to the right
Row 1, cell 1 Row 1, cell 2
Row 2, cell 1 Row 2, cell 2
<table>
  <caption style="caption-side: right;">Caption to the right</caption>
  <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
  </tr>
  <tr>
    <td>Row 2, cell 1</td>
    <td>Row 2, cell 2</td>
  </tr>
</table>

In this example, the caption is placed to the right of the table.

By using the caption-side property, you can control the placement of captions in your tables according to your design needs.

.periodic {
   display: table;
}