超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのホームページ作成講座 > テーブル講座 > テーブルにタイトルつける > Next 

■ テーブルにタイトルつける

テーブルにタイトルをつけるには、<caption> タグを使います。

タグ名プロパティ説明
<caption>〜</caption>aligntopタイトルをテーブルの上に表示(デフォルト)
bottomタイトルをテーブルの下に表示

align="top" で、タイトルをテーブルの上に表示します。デフォルトですので、省略することができます。タイトルはセンタリングして表示されます。

<table border>
<caption align="top">A BEST</caption>
<tr><td>10.</td><td>Fly high</td></tr>
<tr><td>11.</td><td>vogue</td></tr>
<tr><td>12.</td><td>Far away</td></tr>
</table>

A BEST
10.Fly high
11.vogue
12.Far away

align="bottom" で、タイトルをテーブルの下に表示します。

<table border>
<caption align="bottom">A BEST</caption>
<tr><td>10.</td><td>Fly high</td></tr>
<tr><td>11.</td><td>vogue</td></tr>
<tr><td>12.</td><td>Far away</td></tr>
</table>

A BEST
10.Fly high
11.vogue
12.Far away

テーブルの上と下、両方に表示することもできます。

<table border>
<caption align="top">A BEST</caption>
<caption align="bottom">Ayumi Hamasaki</caption>
<tr><td>10.</td><td>Fly high</td></tr>
<tr><td>11.</td><td>vogue</td></tr>
<tr><td>12.</td><td>Far away</td></tr>
</table>

A BEST Ayumi Hamasaki
10.Fly high
11.vogue
12.Far away

タイトルの幅が、テーブル全体の幅より長くなるために、自動的に改行されています。テーブルの幅を長くすると、改行されません。

<table border width="200">
<caption align="top">A BEST</caption>
<caption align="bottom">Ayumi Hamasaki</caption>
<tr><td>10.</td><td>Fly high</td></tr>
<tr><td>11.</td><td>vogue</td></tr>
<tr><td>12.</td><td>Far away</td></tr>
</table>

A BEST Ayumi Hamasaki
10.Fly high
11.vogue
12.Far away


 Home < 超初心者のためのホームページ作成講座 < テーブル講座 < Back < テーブルにタイトルつける > Next