CSS caption-side Property

This property is used to specify the location of the table caption. It's found in HTML tables. This property is applicable to any element whose display property is set to caption-side.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    table, td, th {
        border: 1px solid #212b36;
    }
    .table1 {
        caption-side: bottom;
    }
    .table2 {
        caption-side: top;
    }
</style>
</head>
<body>

<table class="table2">
    <caption>caption-side: top</caption>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>
<br><br>
<table class="table1">
    <caption>caption-side: bottom</caption>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>

</body>
</html>

Preview

Property Values

Value	Description
top	The caption is displayed above the table. This is the default setting.
bottom	Place the caption beneath the table.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
caption-side	1.0	1.0	1.0	8.0	4.0

break-inside

caret-color

CSS caption-side Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us