楽の出来るホームページの書き方

このページは、XHTML 文書での表の書き方を説明したものです。このページで説明している要素を使ったサンプルを見ながら説明を読むと分かりやすいと思います。

---

表の基本的な書き方

文章では分かりにくい情報などを、見やすくまとめるのに表を使うことがありますよね。XHTML 文書でも表を使うことが出来ます。次の例を見てください。美容室の価格表の例ですが、1列目が種類、2列目が価格になっていて、3行の情報があります。1行目がヘッダになっています。

<table>

    <tr>

        <th>種類</th>

        <th>価格</th>

    </tr>

    <tr>

        <td>シャンプー</td>

        <td>1,500 円</td> 

    </tr>

    <tr>

        <td>セット</td>

        <td>2,500 円</td>

    </tr>

    <tr>

        <td>カット</td>

        <td>3,300 円</td>

    </tr>

</table>

表の部分を <table> タグで囲み table 要素にしています。table 要素の中には行を表す tr 要素を書きます。<tr> タグで囲むことで、その部分の内容が行になります。そして、その行の中の1項目を表すのが、td 要素です。td 要素の代わりに th 要素を書いた場合は、その部分が、ヘッダの1項目になります。

---

表に題名と要約を加える

XHTML 文書では、表に題名と要約を加えることが出来ます。ここでの要約は、実際には表示されませんが、音声で読み上げるブラウザなどでは要約を読みあげるので、そのようなブラウザを使っている人のために心遣いとして書いておきましょう。

<table summary="美容院でのシャンプー、セット、カットのサービスの値段を表しています。">

    <caption>美容院でのサービスの値段表</caption>

    <tr>

        <th>種類</th>

        <th>価格</th>

    </tr>

    <tr>

        <td>シャンプー</td>

        <td>1,500 円</td>

    </tr>

    <tr>

        <td>セット</td>

        <td>2,500 円</td>

    </tr>

    <tr>

        <td>カット</td>

        <td>3,300 円</td>

    </tr>

</table>

表の題名には、caption 要素を使います。<table> タグのすぐ後に、題名の内容を書き、<caption> タグで囲んで、caption 要素にします。要約は、table 要素に summary 属性を加えて指定します。要約を読んで、表の内容が理解できるように書きましょう。

---

列や行をまたぐ項目

XHTML 文書では、列や行をまたぐ項目を作ることが出来ます。td 要素、th 要素に colspan 属性、rowspan 属性を加えて、設定します。colspan 属性には、項目が何列またぐかを設定します。たとえば colspan="2" を指定すると、その項目は2列をまたぐことを表します。rowspan 属性は、項目が何行またぐかを設定します。

<table summary="美容院でのシャンプー、セット、カットのサービスの値段を表しています。">

    <caption>美容院でのサービスの値段表</caption>

    <tr>

        <th colspan="2">種類</th>

        <th>価格</th>

    </tr>

    <tr>

        <td rowspan="3">男性</td>

        <td>シャンプー</td>

        <td>1,500 円</td> 

    </tr>

    <tr>

        <td>セット</td>

        <td>2,500 円</td>

    </tr>

    <tr>

        <td>カット</td>

        <td>3,300 円</td>

    </tr>

    <tr>

        <td rowspan="3">女性</td>

        <td>シャンプー</td>

        <td>1,500 円</td> 

    </tr>

    <tr>

        <td>セット</td>

        <td>3,000 円</td>

    </tr>

    <tr>

        <td>カット</td>

        <td>4,000 円</td>

    </tr>

</table>

ちょっと複雑になりますが、例をよく見て自分で表を書いてみると、だんだん理解できるようになると思います。