19: HTML tables - 日々ごちゃごちゃと考える

http://dev.opera.com/articles/view/19-html-tables/

The most basic table

<table>
   <tr>
      <td>Volcano Name</td>
      <td>Location</td>
      <td>Last Major Eruption</td>
      <td>Type of Eruption</td>
   </tr>
   <tr>
      <td>Mt. Lassen</td>
      <td>California</td>
      <td>1914-17</td>
      <td>Explosive Eruption</td>
   </tr>
   ...
</table>

上記の HTML マークアップを分解してみる

<table>...</table>: ブラウザにこの中身はテーブルとして表示しろと指定
<tr>...</tr>: tr element で行を作る。ブラウザは <tr> から </tr> までの中身を横方向に並べる。
<td>...</td>: td element は行の中の個々のセルを作る。テーブル内のデータの数だけ td elements を使うことになる。空白や隙間のために空の td element を使わないこと。CSS でやれ。

基本的に以下のようにネストされる:

<table>
   <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
   </tr>
</table>

違う順番でネストすると変なことになる。

Adding some more features

もうちょっと複雑な機能を使ってみる。テーブルに見出しとヘッダを追加して、意味論的にも screen reader での認識しやすさも向上させよう。

<table>
   <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
   <tr>
      <th>Volcano Name</th>
      <th>Location</th>
      <th>Last Major Eruption</th>
      <th>Type of Eruption</th>
   </tr>
   <tr>
      <td>Mt. Lassen</td>
      <td>California</td>
      <td>1914-17</td>
      <td>Explosive Eruption</td>
   </tr>
   ...
</table>

ここで出てきた新しい elements:

caption: テーブルに見出しを付ける。ブラウザでは、CSS で指定しない限り、テーブルと同じ幅の中にセンタリングして表示する。
th: th element はその内容を各列のヘッダとする。これは意味を与えるだけでなく、いろいろなブラウザやデバイスで正しく表示されるようになる。

Structuring the table further

最後のステップとして

テーブルヘッダとテーブルボディを定義する
フッタを追加
列ヘッダの対象範囲を指定
テーブルの内容を説明する summary attribute を追加

<table summary="a summary of recent major volcanic eruptions in the Pacific Northwest">
   <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
   <thead>
      <tr>
         <th scope="col">Volcano Name</th>
         <th scope="col">Location</th>
         <th scope="col">Last Major Eruption</th>
         <th scope="col">Type of Eruption</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td colspan="4">Compiled in 2008 by Ms Jen</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th scope="row">Mt. Lassen</th>
         <td>California</td>
         <td>1914-17</td>
         <td>Explosive Eruption</td>
      </tr>
      ...
   </tbody>
</table>

ここで出てきた新しい elements/attributes:

thead, tbody, tfoot elements: テーブルヘッダ、テーブルボディ、テーブルフッタを決める。大量の行と列で複雑になるテーブルを作るのでなければ、これはやり過ぎかもしれない。複雑なテーブルでは書くのが楽になるだけでなく、ブラウザやデバイスにも有用なものである。
colspan, rowspan attributes: colspan は複数列にまたがるセルを作る。rowspan は複数行にまたがるセルを作る。
summary attribute: テーブルの内容の要約を指定する。screen reader では使用されるが、普通に表示された場合はいなくなる。この attribute は W3C の WCAG 1.0 と HTML 4.0 ではこのようになっているが、策定中の新しい仕様には載っていない。まだどうするか決まっていないようだ。あったとしても害はないままアクセシビリティは向上するので、WSC では使い続けることにした。
scope attribute: th element が行のヘッダなのか列のヘッダなのかを指定する。

CSS to the rescue: a better looking table

body {
   background: #ffffff;
   margin: 0;
   padding: 20px;
   line-height: 1.4em;
   font-family: tahoma, arial, sans-serif;
   font-size: 62.5%;
}

table {
   width: 80%;
   margin: 
   background: #FFFFFF;
   border: 1px solid #333333;
   border-collapse: collapse;
}

td, th {
   border-bottom: 1px solid #333333;
   padding: 6px 16px;
   text-align: left;
}

th {
   background: #EEEEEE;
}

caption {
   background: #E0E0E0;
   margin: 0;
   border: 1px solid #333333;
   border-bottom: none;
   padding: 6px 16px;
   font-weight: bold;
}

CSS の解説は略

Summary

いろんなデバイスやブラウザでちゃんと読めるようにするには、正しいコードにすることが重要。HTML は最低限にして、見た目は CSS で指定する。
キレイなコードにしておけば、テーブルもケータイや screen reader で読める。scope や summary といったattributes とか caption element を使って、意味の通じるように書くこと。あと余白を取るために空のセルを使わないこと。