CSS Property caption-side
The caption-side property specifies where to put the table caption.
We can choose to add the table caption to the top or bottom of a table.
Summary
| Item | Value |
|---|---|
| Initial value | top |
| Inherited | yes |
| Version | CSS2 |
| JavaScript syntax | object.style.captionSide="bottom" |
CSS Syntax
caption-side: top | bottom | inherit
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| top | Puts the caption above the table. This is default |
| bottom | Puts the caption below the table |
| inherit | Inherit the caption-side property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
caption-side |
Yes | 8.0 | Yes | Yes | Yes |
Example
An example showing how to use caption-side CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
caption {<!-- w w w . java 2 s . c o m-->
font-weight: bold;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: #666666;
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>Font properties</caption>
<tr>
<th>Property</th>
<th>Purpose</th>
</tr>
<tr>
<td>font-family</td>
<td>Specifies the font used.</td>
</tr>
</table>
</body>
</html>