テーブルレイアウトについて｜ホームページの構造

現在地: Home » 初級ホームページ作成講座：目次 » テーブルレイアウトについて

テーブルレイアウトについて

テーブルレイアウトのメリット

初心者でも段組しやすい
ブラウザ表示モードによる影響をあまり受けない
均一性のあるレイアウトで見た目が良い

~~はじめに、実は【Yahoo!JAPAN】のトップページもテーブルを使ってレイアウトされてます。~~「初心者でも作成しやすい」というのは、基本的な枠の中にさらにテーブルを入れその隣にテーブルを入れ,,,,といったように、テーブルの入れ子状態にするだけの場合です。文章がメインのサイトなら全然それでOKです。

「ブラウザによる影響」というのは主にスタイルシートを利用した場合の話で（「スタイルシートレイアウトについて」で説明）テーブルレイアウトを使用する際はあまり気に留めなくても良いかと,,,,

▲Top

テーブルレイアウトのデメリット

本来テーブル（表）はレイアウトを組むものではない
アクセシビリティ上はあまりおすすめ出来ない
構造が複雑化すると手に負えない
構造が複雑化するとHTMLの容量が大きくなる
構造が複雑化すると表示に時間がかかる

アクセシビリティという点で考えると、テーブルタグをレイアウト目的で使用するのは全くの論外です（W3Cの推奨ではない）。視覚障害のある方が使用される「スクリーンリーダー」等の音声読み上げは、テーブル構造に弱く（スクリーンリーダーはテーブルを横方向に読み上げる）、ウェブ作成者の意図したようには訪問してもらえません。

HP作成者が誘導したい順A→B→C
A	D	G
B	E	H
C	F	I

スクリーンリーダーの読上げ順A→D→G
A	D	G
B	E	H
C	F	I

これはテーブルタグの構造を知れば簡単な事です。別ページでテーブルタグについては解説してますが、とりあえず上の表のタグは下記のようになりますが、どうですか？初心者なりにABCの順番に気が付きませんか？

<table border="1">
<tr>
<td>A</td>
<td>D</td>
<td>G</td>
</tr>

<tr>
<td>B</td>
<td>E</td>
<td>H</td>
</tr>

<tr>
<td>C</td>
<td>F</td>
<td>I</td>
</tr>
</table>

人間の目なら画面上から縦にABCと判断できますが、スクリーンリーダーは機械(プログラム) です。プログラムはHTMLを上から順に読み込みます。これは後に説明する検索エンジンのロボットも同様です。

また、テーブル構造はテーブルのセル内のデータをすべて読み込まないと表示されないというデメリットも持っています。。付け加えるならば、複数のセルを持つ表を作成した場合、例え空白のセルであっても1つのデータとみなされます。見た目だけを重視して、安易に構造が複雑化すればHTMLの容量が増えデータをダウンロードするのに時間が非常にかかります。せっかくアクセスがあっても、表示されるのに時間がかかれば当然の事ながら訪問者は逃げてしまいます。

セルH・Iは空白でもデータ
A	D	G
B	E
C	F

セルを結合してデータを減らす
A	D	G
B	E
C	F

こここまでくると、テーブルレイアウトについてマイナス面ばかりが目立ってきましたが、世の中にはまだまだテーブルレイアウトのウェブサイトがたくさんあります。しかもこれが見た目にも素晴らしいサイトばかりです。近年ではブロードバンドの普及により、テーブルタグをレイアウト目的で使用しているウェブサイトでも表示速度という点では、何の問題もなくなりました。

しかしながら、アクセシビリティを考慮するとやはりテーブルレイアウトを使用するのは避けた方が良いかと考えます。(もちろん、アクセシビリティに考慮したサイトもあるのですが。)

▲Top

ホームページ制作