ここまでで，表の基本についてはご理解いただけたと思う。ここでは，表のキャプションおよび表の要約について説明する。

　XHTML では，表にキャプション（表題）を設けることができる。これには，caption 要素を用いる。

<caption>...</caption>

caption 要素が現れることのできる位置は決まっていて，“table 要素の内容の最初”となっている。つまり，table 要素の開始タグの直後にしか，caption 要素は現れることができない。また，caption 要素は，1 つの表の中に複数出現してはならない。この要素の内容は，テキストなどであるが，パラグラフ・見出し・箇条書きなどは含んではならない。

　キャプションのある表について，例をご覧いただこう。

<table frame="box" rules="all" border="1">
<caption><a href="http://www.kotsu.metro.tokyo.jp/">都営地下鉄</a>の路線</caption>
<tr><th>路線</th><th>ラインカラー</th><th>営業区間</th><th>備考</th></tr>
<tr><th>浅草線</th><td>ピンク</td><td>押上―西馬込</td><td>押上から京成線・北総開発鉄道乗り入れ，泉岳寺から京浜急行線乗り入れ</td></tr>
<tr><th>新宿線</th><td>黄緑</td><td>新宿―本八幡</td><td>新宿から京王線乗り入れ</td></tr>
<tr><th>三田線</th><td>青</td><td>西高島平―目黒</td><td>白金高輪―目黒は営団南北線と共用，目黒から東急目黒線乗り入れ</td></tr>
<tr><th>大江戸線</th><td>赤紫</td><td>光が丘―都庁前―大門―両国―飯田橋―都庁前</td><td>“6 の字”運転，リニアモータ採用</td></tr>
</table>

参考までに出力を示すと，次のようなる。

　表を作ったとき，必要ならば，その要約を示すことができる。これには，table 要素の summary 属性を用いる。

　多くブラウザでは，指定した要約は，画面表示などの場合，出力されない。しかし，スタイルシートで適切な記述をすれば，これを表示させることができる。

　表の要約を書いておくことは，ページが読み上げられるときに効果を発揮する。表を読み上げて理解することは，なかなかに難しい。そこで，要約を示してどんな内容の表であるかを説明しておくと，読み上げられたときなどに理解しやすくなるだろう。

　先ほどの表の例の，table 要素の開始タグを書き換えて，要約を示しておこう。

<table frame="box" rules="all" border="1" summary="都営地下鉄 4 路線の，ラインカラー，営業区間，乗り入れ路線などをまとめた。">
<caption><a href="http://www.kotsu.metro.tokyo.jp/">都営地下鉄</a>の路線</caption>
...後略...

図 13.1 [D]

先ほども述べたように，多くのブラウザでは，この summary 属性の値は画面出力（印刷出力）されない。ただし，Netscape 6 以降であれば，表を選択してプロパティを表示させることにより，この要約が表示される（図 13.1）。

　通常の出力に混じって，要約を出力させるには，例えば CSS（カスケーディングスタイルシート）を使用して，次のような指定を行えばよい。指定のしかたなどは，ここでは省略する。Let's begin CSS などの CSS チュートリアルを参考にされたい。

table[summary]:after { display: block; font-size: smaller; content: attr(summary); }

　これを適用して，先ほどの表を出力させると次のようになる。

　前記の CSS の記述に対応しているブラウザであれば，表の下に小さめの文字で要約が表示されるはずである（残念ながら，Netscape 6，Netscape 7，Opera 6，Internet Explorer 6 では，これは適用されないことを確認している；また，Opera 7 では出力が乱れてしまう）。Netscape 6 以降をお使いの方は，プロパティの表示によって要約が見られることを確認されたい。