# caption-side property

The `caption-side` property specifies a position of a table caption created using the `<caption>` tag. The property can have two values: `top` (at the top of a table, by default) or `bottom` (below the table).

## Syntax

`selector { caption-side: top | bottom; }`

## Example

Let's place the caption above the table:

`<table border="1" width="300"> <caption>Table</caption> <tr> <th>Head</th> <th>Description</th> </tr> <tr> <td>text1</td> <td>text2</td> </tr> </table>` `table { width: 100%; border-collapse: collapse; } td { width: 200px; height: 100px; text-align: center; } caption { caption-side: top; font-weight: bold; }`

:

## Example

Now let's move the caption below the table:

`<table border="1" width="300"> <caption>Table</caption> <tr> <th>Head</th> <th>Description</th> </tr> <tr> <td>text1</td> <td>text2</td> </tr> </table>` `table { width: 100%; border-collapse: collapse; } td { width: 200px; height: 100px; text-align: center; } caption { caption-side: bottom; font-weight: bold; }`

:

## See also

- the `bottom` property
  that specifies a position of an element bottom edge
- the `top` property
  that specifies a position of an element top edge
- the `left` property
  that specifies a position of an element left edge
- the `right` property
  that specifies a position of an element right edge
- the `::backdrop` pseudo-element
  that specifies a position after the first element

← →
↑
en ru