caption-side
Description
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.
| Item | Value |
|---|---|
| Initial value | top |
| Inherited | yes |
| Version | CSS2 |
| JavaScript syntax | object.style.captionSide="bottom" |
Syntax and Property Values
caption-side: top | bottom | inherit
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 |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
caption {<!--from www. j a v a 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>
The code above generates the following result.
