Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>表に題名を表示する

表に題名を表示する(caption要素)

普通コースじっくりコースアイコンの説明 普通コースじっくりコースアイコンの説明

使用タグ <caption>表の題名</caption>

HTML一覧タグ辞典 … <caption> タグ

<caption>タグを使うと、表の題名を作成できます。<table>〜</table>タグの中で、最初に記述します。

使用例

表に題名を付けましょう!ここでは「[題名]」と入力しています。前に述べたとおり、<caption>タグは<table>〜</table>タグの中の最初に記述しましょう。

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1">
<caption>[題名]</caption>
<tr>
<th>1つ目の見出しセル</th>
<th>2つ目の見出しセル</th>
<th>3つ目の見出しセル</th>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>

このように<table border="1">の後に<caption>[題名]</caption>と記述します。

使用例の表示

[caption要素を使用したブラウザでの表示例]
一人暮らしの前向きな料理
[題名]
1つ目の見出しセル 2つ目の見出しセル 3つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル

このようにして、表の見出しを表示します。

表の題名の表示位置を指定するには?

caption 要素の align 属性「推奨されない」属性です。そして、caption-side プロパティは、表に付ける題名の表示位置を指定できますが、Win版Internet Explorer では、caption-side プロパティに対応していません。
では、どうやって指定するのでしょうか?
水平方向(横方向の位置)はCSSの text-align プロパティで指定します。そして、表の上に表示するか、下に表示するかは caption 要素の align 属性を使用するしかありません。 caption 要素の align 属性の値には「top」(表の上)、「bottom」(表の下)を指定できます。「left」や「right」はブラウザによって表示が異なるので、使用しない方がいいでしょう。ですが、最初に述べたように、caption 要素の align 属性は「推奨されない」属性なので、当サイトでは、この属性の使用を推奨しません。

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system