CSS - caption-side 属性



caption-side 属性指定应显示表格标题的位置(顶部或底部)。

可能的值

  • top - 将标题的元素框置于表格框上方。
  • bottom - 将标题的元素框放在表格框下方。

适用于

所有 HTML 定位的元素。

DOM 语法


object.style.captionSide = "top"; 

以下是显示此属性用法的示例 -


<html>
<head>
<style>
	 	caption.top {caption-side: top}
	 	caption.bottom {caption-side: bottom}
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>caption-side: top</h2>
	 	 	 <table style = "width: 400px; border: 2px solid black;">
	 	 	 	 	<caption class = "top">
	 	 	 	 	 	 This caption will appear at the top of the table.
	 	 	 	 	</caption>
	 	 	 	 	<tr><td >Data 1</td></tr>
	 	 	 	 	<tr><td >Data 2</td></tr>
	 	 	 </table>
	 	</div>
	 	<div>
	 	<h2>caption-side: bottom</h2>
	 	 	 <table style = "width: 400px; border: 2px solid black;">
	 	 	 	 	<caption class = "bottom">
	 	 	 	 	 	 This caption will appear at the bottom of the table.
	 	 	 	 	</caption>
	 	 	 	 	<tr><td >Data 1</td></tr>
	 	 	 	 	<tr><td >Data 2</td></tr>
	 	 	 </table>
	 	</div>
</body>
</html>