「テーブルレイアウト」はなぜだめか、使わない理由を説明できますか？

「テーブルレイアウトはするな」

当たり前に言われています、がしかし、実際なぜ使ってはいけないのかを具体的に説明できる人が少ないです

なので、その理由と、本当に使ってはいけないのかをまとめてみました。

メリット・デメリット

メリット

崩れづらい

昔ながらのタグな故、tableタグで組むと崩れが起きづらい

組みやすいレイアウトがある

CSSでは組みのが大変な組み方を簡単に実現できる。

例えば縦横中央寄せなど。

ただし、現在はdisplay: table-cellなどもあるので代わりは効く

デメリット

読み込み速度

こちらが主な理由の１つ

tableタグの場合、table全てを読み込まないと表示されないと聞きます。

表が大きくなればなるほど、表示に時間がかかってしまいます。

ページ全体をテーブルレイアウトにした場合、ページ全体を読み込んでからページが表示されるのでかなりラグがでます。

複雑なレイアウトをすると煩雑に

単純な表ならわかりやすいが、レイアウトに使うとかなり難しい構造になる。

あとで修正するのが大変。

音声ブラウザに対応できない（アクセシビリティ観点）

音声ブラウザに対応できないケースが多いため、アクセシビリティの観点でもよくありません。

SEOに弱い

アクセシビリティに弱いということは、構造化ができているページではなくなりますので、SEOとしても何を書いてあるかクローラーにはわかりません。

表示が複雑になり、動作も重くなり、クローラーにもわかりづらい。結果的にSEOとしてはマイナスになります。

単純にダサい

tableで組んでいると単純にダサく感じる世のなか。ただ、これは理由にはならず、説明もできないもの。

また、CSSがなかった時代に仕方なくtableタグで組んでいた時のものでもある。

CSSができた今では無用の産物？

まとめると

とはいえ、表を作成するのにあえてliタグなど何か違う気がすることもある。

レイアウトの調整にtableを使うのは駄作だが、表を作るのにtableは全然問題ありません。表なのでtableで作りましょう。

ただし、HTMLメールではテーブルレイアウトが使われています。理由としてはメーラーがcssや各種HTMLに対応していないため。

なぜこのご時世に対応できていないのかは不思議です。chrome、firefoxのメーラーができ、他のメーラーは削除されないかな・・・。

こんな本があるので、一度読むと良いです。