表(テーブル)とは、データを縦横二次元的に配列したものです。
また、表はデータを二次元的に配列するものなので、視覚障碍者などにはどうしても分かり難くなってしまいます。
この点については、現行の規格では視覚障碍者でもなるべく分かり易くなるような属性などが追加されており、『ホームページリーダ』などの音声ブラウザでもサポートするところが増えてきております。
本来の意味で表を用いる場合はこれらの属性を有効に利用する事が望ましいと言えるでしょう。
表(テーブル)の基本的な組み方は以下の通りです。
<table summary="表の内容に関する説明" cellspacing="コマ間のマージン幅" cellpadding="コマ内のパッディング幅"><caption>表に与えた題名</caption><tr><th abbr="見出しコマの略した言い方" scope="見出しの対応する方向">表の見出しコマ</th><td>表のデータコマ</td>…</tr>…</table>
すなわち、
となります。
以下、順を追って説明しましょう。
<table>要素は表全体です。
属性にはいろいろありますが、これだけは知っておいて下さい。
<caption>要素は、表に与える題名です。
内容はインライン要素のみとなります。
この要素は必須と言う訳ではありませんが、視覚障碍者だけでなく、一般の閲覧者でもあると便利でしょう。
表の行成分は<tr>要素となります。
内容は後述のコマを表す<th>要素か<td>要素に限られます。
数あるコマのうち、見出しとして機能させるコマは<th>要素とします。
内容は特に問いませんが、表の見出しコマと言う機能を考えると、インライン要素だけで充分でしょう。
幾つか属性がありますのが、特に知っておいて欲しいものを挙げておきます。
表のデータコマは、<td>要素とします。
内容は特に問いませんが、表組みのデータと言う性質を考えると、ブロックレヴェル要素を入れる事はまず無いと思われます。
属性もいろいろありますが、多くは表現に関するものなので、特に覚える必要は無いでしょう。
実際に簡単な表を組んで見ましょう。
<table summary="使用しているブラウザとメーラを、各人毎に並べております。" border="1" cellspacing="0" cellpadding="4"><caption>使用しているブラウザとメーラ</caption><tr><td></td><th scope="col" abbr="ブラウザ">常用ブラウザ</th><th scope="col" abbr="メーラ">メーラ</th></tr><tr><th scope="row" abbr="中村">中村由子</th><td>もじらファイヤーフォックス</td><td>もじらサンダーバード</td></tr><tr><th scope="row" abbr="佐竹">佐竹千佳</th><td>オペラ 7.53</td><td>ポストペット</td></tr></table>
これを実際にレンダリングすると、こうなります。
尚、CSSを表にも適用しているので、ブラウザによって見え方は異なります。
| 常用ブラウザ | メーラ | |
|---|---|---|
| 中村由子 | もじらファイヤーフォックス | もじらサンダーバード |
| 佐竹千佳 | オペラ 7.53 | ポストペット |
また、音声ブラウザは、例えば以下のように発音する事が想定されます。
表の題名
として<caption>要素の内容である「使用しているブラウザとメーラ」が用いられます。
また、表の概要
には<table>要素のsummary属性値が使われております。
実際の本体では、scope="col"属性を付けた「ブラウザ」「メーラ」が対応する縦方向のコマの前に読上げられ(但し「常用ブラウザ」の見出しはabbr属性値の「ブラウザ」に置き換わっております)、scope="row"属性を付けた「中村由子」「佐竹千佳」が対応する横方向、すなわち対応する行の前に読上げられると言う訳です。
これなら、視覚障碍者の方も安心して表の情報を得る事が出来ますね。
表(テーブル)にはこの他にも便利な要素があります。
知っておいた方が良いものを一部だけ挙げておきましょう。
表のヘッダ部分に相当する行(<tr>要素ですね)を纏めて、<thead>要素とする事が出来ます。
また、表の本体も意味ある複数の行を纏めて、<tbody>要素とする事が出来ます。
これらは、論理的なブロックを形成するだけでなく、class属性やid属性などを活用して一括してCSSを適用するのにも用いられます。
内容は当然一つ以上の<tr>要素に限られますね。
さて、表(テーブル)ではコマとなる<td>要素の内容に制限が殆ど無いため、レイアウトなどに用いる事が多いようです。
ですが、表によるレイアウトは非常に問題があります。
CSSを用いる事で、二次元的なレイアウトは充分可能です。
HTMLでやろうとすると、文書の前後関係を破綻させてしまいます。
これは文書を利用する環境によっては問題になる事は勿論ですが(詳細は次項で)、制作する側にも問題になります。
表示に拘って前後関係を無視する文書の作成方法よりも、文書の流れや前後関係に従って文章を書いて行くやり方の方が遙かに楽です。
因みに制作者もサイト開設時にCSSのマスターが不充分だった事もあってテーブルレイアウトで文書を作成しましたが、苦労の割に良いデザインにならなかったのでやめました。CSSが使えない環境向けならともかく、CSSが使える環境が主流の今日ではもうやりたくありません。
表(テーブル)はネットスケープ社が独自仕様として導入したものなので、それより前のブラウザでは正しく表示出来ません。
そんな古いブラウザはもはや死滅したと言うかも知れませんが、文字ブラウザとして有名なリンクスは表(テーブル)を満足に表現出来ないものの、文字ブラウザとしては未だにその地位を揺るがす者を知りません。特にユニックスのデフォルトブラウザとして、今も厳然たる地位を誇っております。
その様なブラウザで閲覧した場合、表に関するタグを尽くエラーとして弾く事になり、その結果、表の組みが崩れて意味が分からなくなる可能性があります。
また、そもそも音声ブラウザなどは表組みを二次元的に表現出来ません。
表(テーブル)は画面の幅を取るため、携帯電話ではサポートしないか、正常にサポート出来ないものもあります。
たとえサポートされていたとしても、表を展開すると携帯電話では表示し切れないものとなり、横スクロールが発生してしまいます。
携帯電話で縦横に亘る画面のスクロールがどれだけ面倒かは、使った事のある方なら分かると思うのですが…。
携帯電話に限らず、PDAや旧世代のノートPCなど、画面の幅が狭いと、やはり横スクロールが避けられなくなります。
現行のブラウザでは、ユーザが独自のCSSスタイル定義ファイルを定義して使う事も出来ます。
表(テーブル)に関してはまだまだ対応が不充分ではありますが、枠線を強制表示させたり、余白などを調整する事くらいは今でも充分可能です。
つまり、閲覧者によっては、レイアウトテーブルだろうが何だろうが、普通の表(テーブル)として閲覧する事になる訳です。
モバイル機器に搭載されたオペラでは、無意味なレイアウトテーブルと判断された場合、表(テーブル)関連タグを尽く削除して表示させる場合があります。
この点については、モバイルオペラ対策で解説しておりますのでご一読下さい。
どうしても用いたい場合は、せめて表(テーブル)関連タグを取払っても意味が通じるようにしましょう。
すなわち、HTML文書を上から下に読んでいって問題が無いような状態にしておき、その上で順序を変える事無く表(テーブル)にしていくのです。
表(テーブル)に関するスタイルの実装は、今も遅れているのが実情です。
特に、displayプロパティに関しては、表(テーブル)関連要素に対して適用すべき値がそれぞれ決まっているものの、これらの値をサポートしているブラウザは殆どありません。
この結果、一たび表(テーブル)関連要素にdisplayプロパティを当ててしまうと、元に戻す事が出来なくなってしまうのです。
ですから、表(テーブル)関連要素に対してdisplayプロパティを当てるのだけはやめておきましょう。
もう一つ、モバイル向けフルブラウザ対策(旧称・モバイルオペラ対策)でも書いておりますが、モバイルオペラは無意味と判断された表組みを尽く解除してしまいますし、その他のモバイル向けフルブラウザでも同様に表組みを解いてしまうものがあります。
この場合、解除された表関連タグに当てられたスタイルが無効になってしまいます。
そこで、表を用いる場合は、コマ要素の内容にもしっかりスタイルを当てておきましょう。
