二十六日目！（table,col要素、colgroup要素、scope属性）

今日は台風の影響で自宅からの仕事になりました。続きすすめます。

●表の列グループと行グループの使いどころ
表（テーブル）は、全体を囲むtable要素、行を定義するtr要素、ヘッダセルのth要素とデータセルのtd要素さえあれば、XHTMLの「表」として最低限の構造を示すことができる。さらに、列グループや行グループを定義する要素があるので覚えておく。

自動販売機の月別売り上げ表を例に考える。table要素で全体を囲み、tr要素で行を、th要素で項目名を、td要素で内容をマークアップするのが基本だが、col要素やcolgroup要素を使って「列グループ」を示すことができる。
そのため、自動販売機の月別売り上げ表では、列それぞれに構造的な意味を与えるために、ひとつひとつcolgroup要素でマークアップする。colgroup要素それぞれにIDを与えておくだけで、構造を明確に示せると同時に、CSSで列ごとに色を変更することも簡単にできる。

<table summary="自動販売機の月別商品売上表">
  <caption>自動販売機の月別商品売上表</caption>
  <colgroup id="month"></colgroup>
  <colgroup id="tea"></colgroup>
  <colgroup id="cola"></colgroup>
  <colgroup id="coffee"></colgroup>
  <thead>
    <tr>
       <th scope="row"> 商品名</th>
       <th scope="col">お茶</th>
       <th scope="col">コーラ</th>
       <th scope="col">コーヒー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <th scope="row">9月</th>
       <td>40,000円</td>
       <td>10,400円</td>
       <td>30,220円</td>
    </tr>
・・・中略・・・
  </tbody>
</table>

※col要素はスタイルを適用するためのグループ化、colgroup要素は構造的なグループか（もちろんスタイルも適用可能）という違いがある。この違いは納得できるものではなく、本来はcolgroup要素で構造的にグループ化するのが当たり前だが、表の列に対して柔軟にスタイルを適用する方法がないため、苦肉の策としてcol要素が認められていると考えるべきである。したがって「colgroup要素で列グループを示すのが原則、スタイルを適用する目的だけならcol要素を」と判断する。

※scope属性
そのth要素の見出しがどちらの方向に対する見出しなのかを明示するための属性で「scope="col"」は縦方向、「scope="row"」は横方向を意味する。この属性はサポートしている音声読み上げ対応のブラウザでは、セルと見出しの関係を読み上げるようになる。

表では列グループたけではなく「行グループ」を示すことができる。thead要素（ヘッダー行）、tbody要素（ボディ行）、tfoot要素（フッター行）の3つが指定できる。行グループを示すことで、ボディ行のみにスクロールバーを表示させたり、印刷時にページをまたぐ表であっても、改ページごとにヘッダー行とフッター行を繰り返し印刷することができる。（ただしこれらの機能はブラウザのサポート状況に依存する）

例として、かなり内容量の多い社員名簿を考えてみる。

ブラウザではヘッダー行、ボディ行、フッター行の順で表示されるが、ＸＨＴＭＬ上はthead要素、tfoot要素、tbody要素の順に記述する決まりがある。現状普及しているブラウザでは、これらの行グループ要素に対応しており、tfoot要素は表の一番最後に表示される。

<table summary="未来コーポレーション社員名簿">
   <caption>社員名簿</caption>
   <colgroup id="number"></colgroup>
   <colgroup id="position"></colgroup>
   <colgroup id="name"></colgroup>
   <colgroup id="callno"></colgroup>
   <thead>
      <tr>
         <th scope="col">社員番号</th>
         <th scope="col">役職/所属</th>
         <th scope="col">氏名</th>
         <th scope="col">内線番号</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th scope="col">社員番号</th>
         <th scope="col">役職/所属</th>
         <th scope="col">氏名</th>
         <th scope="col">内線番号</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>01</td><td>代表取締役</td><td>山田美子</td><td>1000</td>
      </tr>
・・・・中略・・・・
      <tr>
         <td>99</td><td>経理部</td><td>鈴木幸子</td><td>3340</td>
      </tr>
   </tbody>
</table>


勉強の最初の頃に少しcol要素、colgroup要素が出てきてイマイチ理解できたなかったのですが、今回のでだいたい把握できたのではないかと思います。

本日はここまで。