CSS | テーブルのキャプション（figcaption）の位置を調節する

2023-06-032023-06-07CSS テーブル,CSS

CSSでテーブルに付けているキャプション（figcaption）の位置を調節する方法とサンプルコードを紹介しています。

テーブルのキャプションの位置を調節する

テーブルのキャプションの位置を調節した場合の表示サンプルとCSSのサンプルコードになります。

See the Pen CSS | Underline only Table design by yochans (@yochans) on CodePen.

<figure>
	<table>
		<thead>
			<tr>
				<th>name</th>
				<th>Value</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Apple</td>
				<td>100</td>
			</tr>
			<tr>
				<td>Banana</td>
				<td>100</td>
			</tr>
			<tr>
				<td>Pine</td>
				<td>100</td>
			</tr>
		</tbody>
	</table>
	<figcaption>説明文</figcaption>
</figure>

キャプションの位置をテーブルの上部にしたい場合は、tableタグの上にfigcaptionタグを記述します。

左寄せ、中央、右寄せに設定したい場合は、「text-align」プロパティが利用できます。

figcaption {
/* 	text-align: left; */
/* 	text-align: center; */
	text-align: right;
}

余白を微調整する場合は「margin」プロパティまたは「padding」プロパティで問題ありません。

figcaption {
	margin: 5px;
	padding: 5px;
}

以下は上記の表示サンプルで使っているCSSコードになります。

table {
/* 	border-collapse: collapse; */
	width:100%;
}

/* table, th, td {
border: none;
} */

th {
	padding: 5px;
	text-align: left;
}

td {
	padding: 5px;
	border-bottom: solid 1px lightgray;
}

figcaption {
	text-align: right;
}