ホーム＞コース別ガイド一覧＞表に題名を表示する
使用タグ <caption>表の題名</caption>
HTML一覧タグ辞典 … <caption> タグ
<caption>タグを使うと、表の題名を作成できます。<table>〜</table>タグの中で、最初に記述します。
使用例
表に題名を付けましょう！ここでは「[題名]」と入力しています。前に述べたとおり、<caption>タグは<table>〜</table>タグの中の最初に記述しましょう。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1">
<caption>[題名]</caption>
<tr>
<th>１つ目の見出しセル</th>
<th>２つ目の見出しセル</th>
<th>３つ目の見出しセル</th>
</tr>
<tr>
<td>２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、１つ目のセル</td>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
このように<table border="1">の後に<caption>[題名]</caption>と記述します。
使用例の表示
[caption要素を使用したブラウザでの表示例]
| 一人暮らしの前向きな料理 |
[題名]
| １つ目の見出しセル |
２つ目の見出しセル |
３つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
このようにして、表の見出しを表示します。
表の題名の表示位置を指定するには？
caption 要素の align 属性は「推奨されない」属性です。そして、caption-side プロパティは、表に付ける題名の表示位置を指定できますが、Win版Internet Explorer では、caption-side プロパティに対応していません。
では、どうやって指定するのでしょうか？
水平方向（横方向の位置）はCSSの text-align プロパティで指定します。そして、表の上に表示するか、下に表示するかは caption 要素の align 属性を使用するしかありません。 caption 要素の align 属性の値には「top」（表の上）、「bottom」（表の下）を指定できます。「left」や「right」はブラウザによって表示が異なるので、使用しない方がいいでしょう。ですが、最初に述べたように、caption 要素の align 属性は「推奨されない」属性なので、当サイトでは、この属性の使用を推奨しません。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
