caption-side - CSS手册 - API参考文档

语法：

caption-side：top | bottom

默认值：top

适用于：table系元素

继承性：无

动画性：否

计算值：指定值

取值：

top：: 指定caption在表格上边
bottom：: 指定caption在表格下边

说明：

设置或检索表格的caption对象是在表格的那一边。

要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在caption标签内定义标签属性valign为top和bottom。
Firefox还额外支持right和left两个非标准值
对应的脚本特性为captionSide。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-7.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
Basic Support	8.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>caption-side - CSS手册 - API参考文档</title>

<h1>caption在右边</h1>
<table border="1" class="test2">
<caption>caption在右边</caption>
<tbody>
	<tr>
		<td>这是某一单元格</td>
		<td>这是某一单元格</td>
	</tr>
	<tr>
		<td>这是某一单元格</td>
		<td>这是某一单元格</td>
	</tr>
</tbody>
</table>

<h1>caption在下边</h1>
<table border="1" class="test3">
<caption>caption在下边</caption>
<tbody>
	<tr>
		<td>这是某一单元格</td>
		<td>这是某一单元格</td>
	</tr>
	<tr>
		<td>这是某一单元格</td>
		<td>这是某一单元格</td>
	</tr>
</tbody>
</table>

<h1>caption在左边</h1>
<table border="1" class="test4">
<caption>caption在左边</caption>
<tbody>
	<tr>
		<td>这是某一单元格</td>
		<td>这是某一单元格</td>
	</tr>
	<tr>
		<td>这是某一单元格</td>
		<td>这是某一单元格</td>
	</tr>
</tbody>
</table>
</body>
</html>