CSSを利用して表のキャプションの表示位置を設定するコードを紹介します。
概要
tableタグによる表のキャプションはcaptionタグで設定できます。キャプションの表示位置は captionタグのalign属性に表示位置を設定することでキャプションの表示位置を指定できますが、aligh属性が非推奨になったこともあり、CSSの"caption-side"プロパティを利用してキャプションの表示位置を指定する方法が一般的になりつつあります。
プログラム例
コード1
下記のHTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="TableCaption.css" />
</head>
<body>
<table class="ProductTable">
<caption>商品表</caption>
<tr>
<td>ぺんぎんクッキー</td>
<td>250円</td>
</tr>
<tr>
<td>あひるケーキ</td>
<td>380円</td>
</tr>
<tr>
<td>らくだチョコレート</td>
<td>120円</td>
</tr>
<tr>
<td>かるがもキャンディー</td>
<td>160円</td>
</tr>
</table>
</body>
</html>
.ProductTable {
border: solid 1px #000000;
}
.ProductTable tr td {
border: solid 1px #000000;
}
表示結果1
上記のHTMLファイルを表示します。CSSもcaptionタグのalign属性もキャプションの表示位置に関する記述がない場合はキャプションは表の上部に表示されます。
コード2
続いてCSSファイルを下記に変更します。captionタグに対して "caption-side"プロパティを指定します。値は"bottom"とし、キャプションを票の下部に表示する設定とします。
.ProductTable {
border: solid 1px #000000;
}
.ProductTable tr td {
border: solid 1px #000000;
}
.ProductTable caption {
caption-side: bottom;
}
表示結果2
上記のHTMLファイルをWebブラウザで表示します。キャプションが票の下部に表示されていることが確認できます。
コード3
CSSファイルの"caption-side"の値を"top"に変更します。
.ProductTable {
border: solid 1px #000000;
}
.ProductTable tr td {
border: solid 1px #000000;
}
.ProductTable caption {
caption-side: top;
}
表示結果3
上記のHTMLファイルをWebブラウザで表示します。テーブルのキャプションがテーブルの上部に表示されていることが確認できます。
以前の設定方式 (captionタグのaligh属性を利用する方法)
captionタグのalign属性を利用してキャプションの位置を設定できますが、こちらは現在非推奨の記述方式になっています。
.ProductTable {
border: solid 1px #000000;
}
.ProductTable tr td {
border: solid 1px #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="TableCaption.css" />
</head>
<body>
<table class="ProductTable">
<caption align="top">商品表</caption>
<tr>
<td>ぺんぎんクッキー</td>
<td>250円</td>
</tr>
<tr>
<td>あひるケーキ</td>
<td>380円</td>
</tr>
<tr>
<td>らくだチョコレート</td>
<td>120円</td>
</tr>
<tr>
<td>かるがもキャンディー</td>
<td>160円</td>
</tr>
</table>
</body>
</html>
表示結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="TableCaption.css" />
</head>
<body>
<table class="ProductTable">
<caption align="top">商品表</caption>
<tr>
<td>ぺんぎんクッキー</td>
<td>250円</td>
</tr>
<tr>
<td>あひるケーキ</td>
<td>380円</td>
</tr>
<tr>
<td>らくだチョコレート</td>
<td>120円</td>
</tr>
<tr>
<td>かるがもキャンディー</td>
<td>160円</td>
</tr>
</table>
</body>
</html>
表示結果
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2018-01-13
作成日: 2017-12-26
