The **`caption-side` property** in  #key# CSS: Cascading Style Sheets #key# is used to define the place where you want your caption to be placed in a table. It is only used in HTML tables. 

# 
## Syntax
```css
caption-side: top|bottom|initial|inherit;
```

## Property values

- **`top`**: This places the caption above the table. 

- **`bottom`**: This places the caption below the table. 

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits property from its parent value.


## Code

The following is the basic  #key# HTML: Hypertext Markup Language #key# and CSS code to demonstrate the use of the caption-side property.



<head>
<title>Example </title>
</head>
<body>
    <table>
        <caption>Details of Employee</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Contact</th>
                <th>Designation</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Behzad Ahmad</td>
                <td>000000000</td>
                <td>Edpresso Team</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

table, td, th 
{
    border: 2px solid rgb(15, 15, 15);
}
caption 
{
	caption-side: top;
}

codemirror

## Explanation

In this example we have made a table that contains the details of an employee. We set the caption to be placed at the top so we can see that the caption is placed at the top. We can also place the caption at the bottom of the table instead of placing it at the top. 

What is the CSS caption-side property?

Defines where to place the caption in an HTML table: top, bottom, initial, or inherit.