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

  • 2019年10月8日
  • 2020年5月29日
  • HTML/CSS

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

仕事で当たり前の用によく言われること。

しかし、実際なぜ使ってはいけないのかを、具体的に説明できる人が少ない。

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

メリット

崩れづらい

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

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

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

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

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

 

デメリット

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

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

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

読み込み速度

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

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

SEOに弱い

上に書いた通り、表示が複雑になり、動作も重くなり、結果的にSEOとしてはマイナスになる。

音声ブラウザに対応できない

らしい。

単純にダサい

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

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

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

 

最後に

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

レイアウトの調整にtableを使うのは駄作だが、表を作るのにtableはありだと個人的に感じます。

あとあと、HTMLメールの作成にはなぜかいまだにテーブルレイアウトで作る必要があるという。なぜですかね。

こんな本があるので、一度読むと良さそう


Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658