caption-side
CSS caption-side Property
The caption-side property defines the place of HTML <caption> element, used on HTML tables. The <caption> tag is used to give a title for a table. The title (caption) of the table can be placed at the bottom or at the top of the table.
This property has two standardized values: top and bottom. The “top” value defines that the caption box should be placed above the table. The “bottom” defines that the caption box should be placed below the table.
There are four other values which are not standardized: left, right, top-outside and bottom-outside. These four values were proposed in CSS 2, but not included in CSS 2.1 specification.
The caption-side property can also apply to any element whose display property is set to “caption-side”.
| 类目 | 类目 |
|---|---|
| Initial Value | top |
| Applies to | Table-caption elements. |
| Inherited | Yes. |
| Animatable | Discrete. |
| Version | CSS3 |
| DOM Syntax | object.style.captionSide = “top”; |
Caption-side property for a table caption
Caption-side property for a table caption
Use a table caption for setting a short heading to the table, something like a short description. This will describe the structure of a table. The summary attribute of the <table> tag can be used for this purpose. Insert it after the opening <table> tag. Take into account, that it must be the first child of a table. With the help of the caption-side property, you may change the position of the caption.
Syntax
Syntax
caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;
Here is an example where the “top” value is applied. It puts the caption above the caption box.
Example of the CSS caption-side property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
}
.top caption {
caption-side: top;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #ccc;
color: #666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "top":</p>
<table class="top">
<caption>Some title here</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>
Result
Example of the caption-side property with two values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #ccc;
}
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #cccccc;
padding: 3px;
}
td {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "top":</p>
<table class="top">
<caption>ABOVE</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
<br>
<p>Here the caption-side is set to "bottom":</p>
<table class="bottom">
<caption>BELOW</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| top | Places the caption above the table. This is the default value of this property. | Play it » |
| bottom | Places the caption below the table. | Play it » |
| left | Places the caption on the left side of the table. A non-standard value supported only by Firefox. | |
| right | Places the caption on the right side of the table. A non-standard value supported only by Firefox. | |
| top-outside | Places the caption above the table. The width and horizontal alignment behavior are not bound to the table’s horizontal layout. A non-standard value supported only by Firefox. | |
| bottom-outside | Places the caption below the table, while the width and horizontal alignment behavior are not bound to the table’s horizontal layout. A non-standard value supported only by Firefox. | |
| initial | It makes the property use its default value. | Play it » |
| inherit | It inherits the property from its parents element. |