ホームページのレイアウトはテーブルではなくCSSを使う理由


CSSが一般化するまでは、レイアウトはテーブルで行うというのが普通でしたが、
今ではdivのようなブロック要素とCSSを使ってレイアウトするようになっています。
もうそろそろテーブル要素でレイアウトしている人は減ってきましたが、
なぜテーブルでレイアウトしないのかということをまだよくわかっていない人もいると思います。
端的に言うと、テーブルレイアウトに比べて、ブロック要素+CSSで作られたレイアウトでは柔軟性が違います。
そもそもテーブル要素はレイアウトのために用意されたものではないので、正しい使い方をしましょうという話です。
正しい使い方はSEOにも関係してくるので、ぜひ知っておくといいですよ。
テーブルレイアウトとブロック要素+CSSでのレイアウト
そもそもテーブルタグというのは、縦横に整列される表のためのタグで、読んで字のごとく「表」を表現するために使うタグです。
表なので簡単に要素を縦横に整列させることができるようになっています。
かつては要素を横に並べるという方法が他になかったのでテーブルタグを利用してレイアウトをしていました。
つまり、これはしかたなくやっていただけで、本来の使い方ではなかった。
そこに、CSSが生まれレイアウト属性が充実してきて、テーブル要素を使わなくても自由にデザインができるようになりました。

だけれど、これまでテーブル要素でレイアウトしてきた人にとっては、慣れないCSSでのレイアウトは難しい。
それまでのホームページ制作ソフトがテーブルでのレイアウトしかできないので、テーブルタグでのレイアウトを使っている。
要は新しい技術を勉強するのが面倒くさいということで、これまでのままでいいじゃんという感覚でたくさんの人がテーブルタグをレイアウトに利用してきました。
たぶん今ではテーブルタグでレイアウトしている人なんてほとんどいなくて、ある意味テーブルタグで頑張っている人は貴重な存在かもしれないけれど、そういう人たちにもそろそろ知ってほしい。
テーブルタグでのレイアウトではなく、CSSを使ったレイアウトをするべき理由を紹介します。

テーブルでレイアウトするメリットとデメリット

本来レイアウトはテーブルではなくCSSを使います。
ですが、テーブルレイアウトをしている人がまだいるというのも事実で、その人たちにとってはテーブルレイアウトにも多少のメリットがあるということでしょう。
本来はメリットデメリットではなくて、タグのそれぞれの特性というのが正しいのですが、ここではメリット・デメリットという視点で挙げてみます。

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

どんなブラウザでも同じように表示される

テーブルは表を構成するためにのタグなので、縦横に整列させることには便利です。
表が意味を持つのは、正しく配列されている場合のみなので、
表が崩れてしまってはテーブルの意味がありません。
だから、どんなブラウザで見ても大きくレイアウトが崩れることはありません。
これは、初心者にとってはうれしいですよね。

書式が決まっているので、初心者でも使いやすい

テーブルは、縦と横を整列されるだけなので、
書式も決まっていて使いやすいです。
HTMLタグだけでCSSを使わなくていいので、CSSを勉強しなくてもいいんです。

横向きに並べたい場合、以下のように書きます。

<table>
<tr><td></td><td></td><td></td></tr>
</table>
3列テーブル

3列テーブル

さらに、縦向きに並べたい場合は、以下のように書きます。

<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tr>
</table>
3行3列テーブル

3行3列テーブル

縦に並べたり、横に並べたりというのを、
HTMLのレベルで決定できるので、初めての人にはわかりやすいかもしれません。
書式が決まっているので、
ホームページ作成ソフトでも適用しやすいため、
ホームページビルダーなどはレイアウトとしてテーブルを使用しています。

テーブルの方が実現しやすいレイアウト

テーブルを使えば簡単に実現できるけど、
CSSだけではなかなかうまく実現できないレイアウト方法もある。
たとえば、オブジェクトを縦中央に配置する方法。
オブジェクトを縦中央に配置する

オブジェクトを縦中央に配置する


テーブルを利用すれば、

<table>
<tr><td valign="middle">中央に配置</td></tr>
</table>

こんな簡単にできる。
これをテーブルタグを使わずに実現しようとするとちょっとした調整が必要になって簡単にはできない。
【CSS】要素を上下左右に中央寄せする色々な方法

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

複雑になるとわけがわからなくなる

簡単なレイアウトだったらテーブルでも出来ますが、
ちょっと複雑になるととたんに面倒になってくる。
複雑なテーブルレイアウトを渡されたりなんかしたら、
どこから手を付けたらいいかわからない。
引継ぎで他の人が書いたコードがテーブルレイアウトだと、発狂しそうになったことがある人が一人や二人じゃないでしょう。
ほんと、テーブルで複雑なレイアウトを組むのはやめて欲しい。。。

テーブルのルールとして、縦横が揃っていないといけない。
縦何行、横何列として生成するので、縦と横の数は同じになる。
そのため、3行3列にたった1つ要素を追加するだけで、
図のように余分に2つのセルを補充しないといけないということになります。

本当は次のように1つだけ追加したいのに、

レイアウトに要素を一つ追加する

レイアウトに要素を一つ追加する

次のように余分なセルを追加しないといけない。

テーブルの場合、セルを余分に追加しないといけない

テーブルの場合、セルを余分に追加しないといけない

これをCSSを使ったレイアウトだと、
要素をそのまま隣に配置することが出来る。

CSSを使った要素の追加

CSSを使った要素の追加

他にも、テーブルの行や列という考え方では、
同じ行や列にある要素の影響を受けてしまいます。
同じ列や行に大きな要素が1つでもあると、他のセルにも影響してしまいます。
同じ列や行の要素は大きい要素に引っ張られて動いてしまうので、
小さい要素を配置しようとしても、これ以上小さく出来ない場合もあります。
むちゃくちゃわかりやすい例ではExcel。
あれは表計算ソフトなので、表でできているけれど、
複雑なものになるとセル同士をつなげたりして高さや幅を調整したりすると思います。
まさにそれをHTMLレベルでしないといけないんです。

テーブルに大きい要素を追加してみる

テーブルに大きい要素を追加してみる

テーブルに小さい要素を追加してみる

テーブルに小さい要素を追加してみる

CSSを使ったレイアウトだと、
追加する要素は独立してるので、
大きい要素も小さい要素も自由に追加することが出来ます。

大きい要素も小さい要素も自由に配置できる

大きい要素も小さい要素も自由に配置できる

複数のセルを結合することが出来るので、
テーブルを使っても複数の行にわたって、要素を配置することが出来ます。
ただ、それをやりすぎるとソースコード見ただけでは何が何だか分からなくなってきます。
規模が大きいと、プロでも触るのが怖いくらいです。

<table>
<tr><td colspan="2"></td><td></td></tr>
<tr><td rowspan="2"></td><td></td><td></td></tr>
<tr><td colspan="2"></td></tr>
</tr>
</table>

実際に表示してみると、こんななってる。

こんななってる

こんななってる

テーブルレイアウトがどんどん複雑になっていくことがわかると思います。

コードが複雑で重くなる

テーブルレイアウトを使うと、CSSとボックス要素を使ったレイアウトに比べて書かないといけない無駄な要素が増えます。
たった1つ追加するのに余分なセルを配置しなければならない。
例は3×3でしたが、10×10とか100×100なんかでレイアウトしたら1つ要素を追加するごとに、
たくさんの無駄なセルを作ることになります。

テーブルの場合、セルを余分に追加しないといけない

テーブルの場合、セルを余分に追加しないといけない

それに比べると、CSSとボックス要素を使った場合は、
単純に要素を1つ追加すればいいだけなので、無駄がなくスッキリします。

CSSを使った要素の追加

CSSを使った要素の追加

コードが複雑になるとページの読み込み速度が遅くなるので、
結果的にSEOとしても不利になるという側面もあります。
ユーザビリティーの面でも、ページの表示速度は速いほうがいいですよ。

SEOに弱い

すでに触れましたが、
テーブルを使ったレイアウトはコードが複雑になりがちです。
セルが膨大に増えていくので、
テキストの量に比べて、空のセルの数が多くなってしまい、
無駄にロード時間が長くなっていたり、
検索エンジンもコードの解釈に時間がかかってしまいます。
SEOにとってページの表示スピードはとても重要なので、ここはとても大事なところです。

きれいなコードと複雑なコード

きれいなコードと複雑なコード

読み込むまで表示されない

テーブルの特徴として、テーブル全体が読み込まれるまで表示されないということがあります。
行と列が密接に関連しているので、すべての構成を解釈するまで表示されません。
つまり、ページ全体がテーブルで作られていると、
全体が読み込まれるまで表示されないので、ページの表示が遅い印象を与えます。
良い混み速度が遅いと、SEOにもよくないのはもちろん、読む人もストレスが溜まりますよね。
逆に、ブロック要素で作られたレイアウトは、
順に読み込まれて表示されていくため、早く表示が開始された印象があります。
ページ全体を読み込むのに10秒かかったら、
テーブルは10秒間何も表示されないわけなので、
いつになったら表示されるねん!っていらだちます。
ブロック要素では、とりあえず表示できる部分は順に表示されていくので、
テーブルに比べてストレスは少ないでしょう。

テーブル要素は読み込まれるまで表示しない

テーブル要素は読み込まれるまで表示しない

ブロック要素は順に表示されていく

ブロック要素は順に表示されていく

メンテナンスしにくい

テーブルレイアウトは、複雑になると本当にわかりにくい。

<table>
<tr><td colspan="2"></td><td></td></tr>
<tr><td rowspan="2"></td><td></td><td></td></tr>
<tr><td colspan="2"></td></tr>
</tr>
</table>

このコードに、真ん中に要素を追加してくれって言われたら、
周りのセルを全部書き直さないといけない。
中央に大きい用をを入れてくれ、でも周りの要素のサイズは変えないでね、
なんて言われたら、テーブルを組みなおして、
周りの要素のサイズを変えないようにセルをうまいこと結合して・・・って
あれやれ、これやれってどんどん言われたら、もうお手上げ!
1つの要素を追加するだけで何十分もかかっちゃう。
非常にメンテナンスのしにくいのがテーブルです。

テーブルは表を作るために用意されているもので、
レイアウト用に作られているわけではないので、
だから、サイズがどうだの、配置がどうだのするものではありません。
それを無理やりレイアウトとして使おうとするので、それは使いにくいですよね。

ホームページの運用において保守やメンテナンス性はすごく大事で、
運用性が低いとそのまま運用コストにつながります。
たった数分の違いでも、それを何度も変更の度に蓄積されていくので最終的にすごい無駄に時間がかかることになります。

非視覚系メディアで正しく読み上げてもらえない

アクセシビリティを考えたときに、
テーブルは読み上げの方向が決まっているので、
意図したような順番で読み上げしてもらえません。
ブロック要素をCSSで並べて配置した場合は、
読み上げの順番(出てくる順番)と配置はそれぞれ独立しているので、
複雑なレイアウトでも意図した順番で読み上げられるようにすることが可能です。

テーブルタグは悪いものではない

なんだか、「テーブルタグは良くない」「テーブルタグは使わないように」みたいな記事に感じたかもしれませんが、テーブルタグが悪いという話ではありません。
テーブルタグにはテーブルタグの良いところがあります。
テーブルタグは表を表現するときには今でも使います。
例えば、料金表やメニューなどはテーブルタグを使います。
会社概要などにもテーブルを使っているでしょう。

プライバシーポリシーや特定商取引法に基づく表記などはどちらを使うか微妙かもしれません。
テーブルタグを使う人もいればCSSを使ってレイアウトを組む人もいるでしょう。
用途に合わせて適切に使うようにしてください。

ただ、これらのメリット、デメリットを考えると、
レイアウトに関してはテーブルで組むのではなく、CSSでレイアウトするようにしましょう。

CSS3からはflexboxも使うべき

CSS3からはflexboxというCSSでのレイアウト操作が可能になり、
縦や横に自由で簡単に要素を配置できるようになりました。
これまで一般的に使われてきたfloat属性では難しかった表現が可能になったり、より指定が簡単に、そして最近必要になっている様々なデバイスに対応したレスポンシブデザインにも親和性の高い指定方法です。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

どんどんと新しい表現、指定方法が出てきていますので、
より便利で使いやすいものを選択して、制作時間と運用の手間の削減をしていきましょう。

[RelService] [Service]