制作上の注意点
テーブル

HTMLのTABLE要素は、データを表形式で表現するものですが、現実にはページレイアウトに多用されています。

文書構造をHTMLで指定し、レイアウトはスタイルシートで指定する方が無理がないのですが、現時点では、スタイルシートの機能をフルに使えません。ブラウザ側のスタイルシートのサポートが不十分で、正しく設定していてもレイアウトがうまくいかない場合が多々あります。

このため、止むを得ずテーブルが使われているのが現状です。しかし、テーブルでページをレイアウトするといのは、ワープロでレイアウトするところを、表計算ソフトでレイアウトしているようなものですから、万全ではありません。

特に、以下のような点に注意してください。

1つのテーブルにたくさんのデータを入れない

テーブル中のデータは、徐々に表示されるのではなく、最後まで読み込まれてから表示されます。従ってデータ量が多い場合は、読み込まれるまでページが空白になり、見ている側のストレスになります。こんな場合は、区切りごとにいくつかのテーブルに分けて入れるほうが良いでしょう。ページの先頭のテーブルの内容をナビゲーションバーや見出し程度に留めてデータ量を小さくしておくと、長く待たされる前に何かが表示されるので、待ち時間がそれほど気にならなくなります。

テーブルを複雑に組み合わせない

テーブルのセルを細かく分けたり、テーブルを入れ子にすると、表示時間が遅くなります。また、音声出力ブラウザやLynxなどテキストブラウザでは、テーブルのデータを行列の表形式では表示しないので、複雑にレイアウトすると、文章を正しい順に読み取れない場合が出てきます。これらのブラウザでも表示してみて、正しく読めるか確認してください。1行ずつ横に読んでみて文章がつながるかどうかが、簡単な目安です。

「表」には罫線を付ける

レイアウト目的でなく、本来の行列の表としてテーブルを使う場合、罫線を付ける方が無難です。たとえば以下のように背景色でセルを区別して、罫線はなしにしている場合、背景色をOFFにして印刷すると、読みにくくなります。Internet Explorerでは初期設定で印刷時の背景色がOFFですから、注意してください。

画面表示では

製品名
A
B
C
標準価格
10,000円
11,000円
8,000円
送料
1,000円
1,000円

500円

合計
11,000円
12,000円

8,500円

印刷時には

製品名
A
B
C
標準価格
10,000円
11,000円
8,000円
送料
1,000円
1,000円

500円

合計
11,000円
12,000円

8,500円