テーブル使用時の注意点

Webサイトを作るとき、表を表示するためという本来の使い方以外にも、レイアウトをするためにテーブルを使用することが多いです。

テーブルを使ったレイアウトがやり玉に挙がってしまうのは、文章の構造を崩してしまうことで、情報が上手く伝わらない場合があることです。すなわち、アクセシビリティの低下につながるからです。

とは言っても、スタイルシートで見栄えを完全に制御できていない現状では、テーブルを使ったレイアウトからの完全脱却は難しいところです。見栄えを保ちつつ、文章構造もあまり崩さないレイアウトをとるためには、テーブルに関する基本的な知識が必要です。　

まず、テーブルは、横１列について記していきます。つまり、１行目の１列目、２列目、３列目・・・、２行目の１列目、２列目、３列目・・・というように記していくのです。

上表のように、見てもらいたい順番をつけて、文章や画像を配置したとします。視覚的には問題なく追うことができますが、これを音声ブラウザや表組みに対応していないブラウザ（i-mode等）で閲覧した場合はどうなるかと言いますと・・・
１→４→７→２→５→８→３→６→９の順番になってしまいます。もし、数字の順番通りに見てもらいたいのであれば、配置は以下のようになります。

複雑な構造になったとしても、基本的には、横１列をたどって、次の行に進むことになります。

この場合、音声ブラウザでの読み上げや表組みに対応していないブラウザでは、セル内の数字の順番に読み上げや表示を行います。

もちろん、上記したことは、本来の目的として表を表示するためにテーブルを使う場合にも当てはまります。

アクセシビリティを考える場合は、更に以下のような事項にも配慮が必要となります。

• 本来の表として使う場合は、見出しのセルとデータセルの区別をはっきりさせる。
  見出しはTH要素、データセルはTD要素を利用します。
  逆に言えば、単に文字を太くしたいからといって見出しでもないのにTH要素を使用するというのはダメです。
• また、本来の表として使う場合は、セルの結合をしない。これは、セルを結合することで、表の構造が崩れてしまいます。

この表の内容は架空の内容ですが、実際にどのように読み上げられてしまうかといいますと、

1. summary属性があれば、その内容
2. 標準コース
3. 個人サイト
4. 無料
   ここまでは問題ありません。問題は5.からです。
5. 非営利団体サイト
6. 商用サイト
7. お急ぎコース
   （以下省略）

となってしまいます。これでは、なんのことだか理解できません。
また、XML等を使って、データベース化をはかろうとした場合、その解釈が非常にややこしくなってしまいます。つまり、情報の共有化がしづらくなります。

• 表の構造や意味を説明するために、TABLE要素にsummary属性をつけておく。
  <TABLE summary="説明文"> というように使用します。

なお、現状では、THEAD、TFOOT、TBODY、COLGROUP、COLの各要素については、Netscape4.xで未対応であることから、使用するかどうかの判断はわかれるかと思います。特に、THEAD、TFOOT、TBODY要素のいずれも使う場合、これらの順番通りに書かないと、文法上問題があるのですが、対応していない場合、TFOOT要素の内容が、TBODY要素の内容より先に表示されてしまいます。
閲覧者のターゲットを考えて使用しないと、思わぬ落とし穴にひっかかることになるので気をつけて下さい。

Webサイトにアクセスしたときに、真っ白けなままの状態が長く続いて、いきなりデータ表示が始まるサイトがあります。この原因は、１ページ丸ごとを１つのテーブルにおさめていることが原因です。

テーブルの表示はテーブル全体のデータが読み込み終了しないと始まらないということです。すなわち、ページが表示されるまでに時間がかかると言うことです。複雑なテーブルを指定していたり、画像のファイルサイズが大きいとなおさらです。
Internet Explorer5.x以上やNetscape6.xでは、スタイルシートで、最初の行を読み終わった段階で、レイアウトを決定して表示できるようにすることもできますが・・・両ブラウザ以外ではこれらの恩恵にあずかることはできません。

全く表示されない状態を短くするには、テーブルを切り分ける必要があります。もしくは、レイアウトに影響がない部分はテーブルの外に出すということが必要です。