caption-sideプロパティ

プロパティcaption-sideは、タグ<caption>で作成された表のキャプションの位置を設定します。このプロパティの値は2つあります: top （表の上部、デフォルト）またはbottom （表の下部）。

構文

セレクタ {
	caption-side: top | bottom;
}

例

キャプションを表の上に配置してみましょう:

<table border="1" width="300">
	<caption>表</caption>
	<tr>
		<th>ヘッダー</th>
		<th>説明</th>
	</tr>
	<tr>
		<td>テキスト1</td>
		<td>テキスト2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: top;
	font-weight: bold;
}

例

では、キャプションを表の下に移動させてみましょう:

<table border="1" width="300">
	<caption>表</caption>
	<tr>
		<th>ヘッダー</th>
		<th>説明</th>
	</tr>
	<tr>
		<td>テキスト1</td>
		<td>テキスト2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: bottom;
	font-weight: bold;
}

caption-sideプロパティ

構文

例

例

関連項目