テーブル

テーブルの基本構成要素

HTMLにおける表はtable要素を使って表現します。表の中には1つ以上の「行」があり、その行の中にはまた1つ以上の「セル」があるという考え方でテーブルを表現します。「行」をtr要素（Table Row）、「セル」をtd要素（Table Data）で表します。

    ┌──────────────┐　一番外枠がtable
    │┌────────────┐│
    ││┌──┐┌──┐┌──┐││　横長の枠がtr
    │││　　││　　││　　│││
    ││└──┘└──┘└──┘││　内側の四角がtd
    │└────────────┘│
    │┌────────────┐│
    ││┌──┐┌──┐┌──┐││
    │││　　││　　││　　│││
    ││└──┘└──┘└──┘││
    │└────────────┘│
    └──────────────┘

簡単なテーブル

簡単なテーブルを作ってみるのが理解の早道です。上の図のように、table要素の中にtr要素があり、その中にtd要素があるという形で要素（タグ）を入れ子にしていきます。

<table>
  <tr>
    <td>りんご</td>
    <td>甘酸っぱい</td>
    <td>おおむね赤</td>
  </tr>
  <tr>
    <td>なつみかん</td>
    <td>かなり酸っぱいと思う</td>
    <td>たいてい黄色</td>
  </tr>
</table>

と記述すると

のようになります（表らしく見えないかもしれませんが、これでも縦横が揃った「表」なのです）。

罫線とセルの境界

欧米のタイプライター文化では、単に「表」というとこのように罫線を使わずに縦の列をそろえたものを指すことが多いわけですが、日本人ならずとも、ちょっと罫線を入れてもらわないと見にくい。罫線はスタイルシートを用いて記述することができます。

<style>
table {
	border-collapse: collapse;
}
td {
	border: solid 1px;
	padding: 0.5em;
}
</style>

というスタイルを設定すると、下のようなテーブルになります。

以下の例はこのスタイルが設定されているものとして示します。

簡便な方法として、tableの開始タグでborder, cellpadding, cellspacingといった属性を指定することもできます。それぞれの属性は

border

表の外側の罫線の太さを示す

cellpadding

セルの中にある文字とセルの枠（罫線）との間隔を示す

cellspacing

セルとセルの間隔（間の罫線の太さ）を示す

という役割で、それぞれピクセル数を数字で示します。

（例）

<table border="1" cellpadding="5" cellspacing="0">
...

テーブルの説明

図表を示す場合、普通はその内容を簡潔に示した説明文（キャプション）を用意します。テーブルにこの説明を結びつける役割を果たすのがcaption要素です。caption要素は、対象となるtable要素の、開始タグの直後に1つだけ記述します。

HTML4のcaptionは比較的短い説明文を前提としており、内容はインライン要素に限られます（たとえばキャプションに出典へのリンクを埋め込むことは可能です）。一方HTML5では、段落など複雑なキャプションを与えることが可能になっています。

<table
  summary="身近な果物を分類整理した表。
  1列目が果物名、2列目が味の特徴、3列目が色">
  <caption>身近な果物</caption>
  <tr>
  ...

<table>
  <caption>身近な果物
    <details>
      <summary>列の構成</summary>
      <p>身近な果物を分類整理した表。1列目が果物名、2列目が味の特徴、3列目が色</p>
    </details>
  </caption>

項目名

最初に述べたように、「表」は横軸に属性をとり、縦軸にそのサンプルを列挙するという使い方に適しています。その場合、表の中には実際のサンプルデータを示す行の他に、それぞれの列がどんな属性を表すかという「項目名」の行が含まれます。このような項目名を示すためにth要素が用意されています。これは行単位で指定する（trの代わり）要素ではなく、tr要素の内部で、tdを置き換えて個々のセルを「項目名」として指定します。

<table>
  <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>

項目名は多くの場合強調書体で表示されます。

セルの背景色

テーブルのセルの背景に色をつけてより情報を分かりやすく表現したくなることもあります。スタイルシートやスタイル属性を用いて、行単位、セル単位の色を設定できます。

<table>
  <caption>身近な果物</caption>
  <tr style="background:#ccccff">
    <th>名称</th>
    <th>味の特徴</th>
    <th>色</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>甘酸っぱい</td>
    <td style="background:#ffcccc">おおむね赤</td>
  </tr>
  <tr>
    <td>なつみかん</td>
    <td>かなり酸っぱいと思う</td>
    <td style="background:#ffff99">たいてい黄色</td>
  </tr>
</table>

行（tr）のスタイル属性を指定することで、項目名の行全体の背景色を異なったものにしています。tdにスタイルを設定すると、そのセルだけに適用されます。

セルの伸張

隣り合う複数のセルのデータが同じ場合、それらのセルを連結してまとめて表現したくなることがあります。HTMLの表でセルを結合するには、rowspan, colspanという属性を指定します。

<table>
  <caption>身近な食べ物と珍しい食べ物</caption>
  <tr>
    <th>大分類</th>
    <th>名称</th>
    <th>味の特徴</th>
    <th>色</th>
  </tr>
  <tr>
    <th rowspan="2">果物類</th>
    <td>りんご</td>
    <td>甘酸っぱい</td>
    <td>おおむね赤</td>
  </tr>
  <tr>
    <!-- 上のセルが伸張してくるのでここのthはなし -->
    <td>なつみかん</td>
    <td>かなり酸っぱいと思う</td>
    <td>たいてい黄色</td>
  </tr>
  <tr>
    <th>宇宙食</th>
    <td>何でしょう</td>
    <td colspan="2">見たことも食べたこともないので不明</td>
    <!-- 左のセルが伸張してくるのでこのtdはなし -->
  </tr>
</table>

セルを伸張した場合は、はみ出すセルの部分は記述しません。

このセルの伸張を行うと、データの再利用が難しくなります。どうしても視覚的にセルをまとめる必要がある時以外は、セルの伸張は使わず、同じ見出し項目やセルデータを繰り返しておきましょう。共通する見出しを持つ行（列）は、次に述べる行（列）のグループ化を行う方が、見た目も分かりやすく、データも有効に活用できます。

行と列のグループ化

このセクションでとりあげる機能は、対応しないブラウザでは期待通りには表現できません。Netscape Navigatorの場合、バージョン6/Mozillaで行のグループ化のみ対応しているようです。

HTML 4.0以降では、行、列をグループ化する手段が定められています。複数の行、列をグループとして示すことで、情報がより理解しやすくなることがあります。見方によっては、2次元の情報を表現するテーブルに、グループ化によってもう一つの次元を加えると捉えることもできます。

<table>
  <caption>身近な果物</caption>
  <colgroup style="background:#ffcccc">
  </colgroup>
  <colgroup>
    <col span="2" style="background:#eeeeee" />
  </colgroup>

<table>
  <caption>身近な果物</caption>
  <thead style="background:#ffccff">
   <tr>
    <th>名称</th>
    <th>味の特徴</th>
    <th>色</th>
   </tr>
  </thead>
  <tfoot style="background:#eeeeee">
   <tr>
    <td>果実総括</td>
    <td>味覚総括</td>
    <td>色彩総括</td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td>りんご</td>
    <td>甘酸っぱい</td>
    <td>おおむね赤</td>
   </tr>
   <tr>
    <td>なつみかん</td>
    <td>かなり酸っぱいと思う</td>
    <td>たいてい黄色</td>
   </tr>
  </tbody>
</table>