语法
caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;
这是应用“top”值的示例。
它将标题放在标题框上方。
CSS caption-side属性的示例：
<!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 属性示例</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>
具有两个值的caption-side属性示例：
<!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 属性示例</h2>
<p>将caption-side设置为 "top":</p>
<table class="top">
<caption>表格标题</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
<br>
<p>将caption-side设置为 "bottom":</p>
<table class="bottom">
<caption>表格标题</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>
表格标题的Caption-side属性
使用表格标题为表格设置一个简短的标题，类似于简短的描述。
这将描述表的结构。
<table> 标记的摘要属性可用于此目的。
将其插入到 <table> 开始标记之后。
考虑到它必须是表的第一个孩子。
借助 caption-side 属性，我们可以更改标题的位置。
CSS caption-side 属性值说明
| 值 | 说明 |
|---|---|
| top | 将标题放在表格上方。这是此属性的默认值。 |
| bottom | 将标题放在表格下方。 |
| left | 将标题放置在表的左侧。仅Firefox支持的非标准值。 |
| right | 将标题放置在表的右侧。仅Firefox支持的非标准值。 |
| top-outside | 将标题放在表格上方。宽度和水平对齐行为不绑定到表的水平布局。仅Firefox支持的非标准值。 |
| bottom-outside | 将标题放置在表格下方，而宽度和水平对齐行为不绑定到表格的水平布局。仅Firefox支持的非标准值。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父元素继承属性。 |
caption-side 属性定义了 HTML <caption> 元素的位置，用于 HTML 表格。
<caption> 标签用于为表格提供标题。
表格的标题（caption）可以放在表格的底部或者顶部。
此属性有两个标准化值：top 和 bottom。
“top”值定义标题框应放置在表格上方。
“bottom”定义了标题框应放置在表格下方。
还有四个未标准化的值：左、右、上外和下外。
这四个值是在 CSS 2 中提出的，但未包含在 CSS 2.1 规范中。
caption-side 属性也可以应用于显示属性设置为“caption-side”的任何元素。
| 初始值 | top |
|---|---|
| 应用于 | 表标题元素。 |
| 继承 | 可继承 |
| 可动画的 | 分离的。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.captionSide=“top”； |
日期：2020-06-02 22:14:21 来源：oir作者：oir