Nuno Silva » Blog Archive » Divs instead of tables

css table divレイアウト 書き方

Nuno Silva » Blog Archive » Divs instead of tables

table要素を使わずdiv要素のみでレイアウトを書くのはcssでfloatやclearを使いこなさなければいけず大変ですので、一部のウェブ制作者の方は今もtable要素のみでレイアウトを書いていると聞きますが、divレイアウトは本当に大変だろうかという問いかけです。5つのtableレイアウトよりもdivレイアウトが優れている点を挙げた上でtableレイアウトをdivレイアウトに書き換える例を解説しています。シンプルなのでいつかはCSSでレイアウトしてみたいなと考えてる方は是非読みましょう。

ちなみにdivレイアウトが優れている5つの理由とは

  • レイアウトの変更が簡単なこと
  • デザインとコンテンツを分離できること
  • アクセシビリティ
  • 構造化されてるのでSEOに有利なこと
  • 転送量が軽減されること

となっています。あとよく言われるのはtableレイアウトだとtable内を全部読み込んでからでないと表示されないというのもありますね。ブロードバンドが普及して最近はあまり話題にならないことですが。