「テーブルレイアウトはするな」
当たり前に言われています、がしかし、実際なぜ使ってはいけないのかを具体的に説明できる人が少ないです
なので、その理由と、本当に使ってはいけないのかをまとめてみました。
メリット・デメリット
メリット
崩れづらい
昔ながらのタグな故、tableタグで組むと崩れが起きづらい
組みやすいレイアウトがある
CSSでは組みのが大変な組み方を簡単に実現できる。
例えば縦横中央寄せなど。
ただし、現在はdisplay: table-cellなどもあるので代わりは効く
デメリット
読み込み速度
こちらが主な理由の１つ
tableタグの場合、table全てを読み込まないと表示されないと聞きます。
表が大きくなればなるほど、表示に時間がかかってしまいます。
ページ全体をテーブルレイアウトにした場合、ページ全体を読み込んでからページが表示されるのでかなりラグがでます。
複雑なレイアウトをすると煩雑に
単純な表ならわかりやすいが、レイアウトに使うとかなり難しい構造になる。
あとで修正するのが大変。
音声ブラウザに対応できない（アクセシビリティ観点）
音声ブラウザに対応できないケースが多いため、アクセシビリティの観点でもよくありません。
SEOに弱い
アクセシビリティに弱いということは、構造化ができているページではなくなりますので、SEOとしても何を書いてあるかクローラーにはわかりません。
表示が複雑になり、動作も重くなり、クローラーにもわかりづらい。結果的にSEOとしてはマイナスになります。
単純にダサい
tableで組んでいると単純にダサく感じる世のなか。ただ、これは理由にはならず、説明もできないもの。
また、CSSがなかった時代に仕方なくtableタグで組んでいた時のものでもある。
CSSができた今では無用の産物？
まとめると
とはいえ、表を作成するのにあえてliタグなど何か違う気がすることもある。
レイアウトの調整にtableを使うのは駄作だが、表を作るのにtableは全然問題ありません。表なのでtableで作りましょう。
ただし、HTMLメールではテーブルレイアウトが使われています。理由としてはメーラーがcssや各種HTMLに対応していないため。
なぜこのご時世に対応できていないのかは不思議です。chrome、firefoxのメーラーができ、他のメーラーは削除されないかな・・・。
HTMLメールとは HTMLメールとは HTMLタグで作られたメール。表組でレイアウトを変更したり、画像を使ったアピールをしたりできるメールです。 また、HTMLメールの場合、開封率がわかり、またテキストメールに比べてクリック[…]
こんな本があるので、一度読むと良いです。
