どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え

Question

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が微妙で困っています。サイトレイアウト大まかな段組は

でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、

タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりはテーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは？みたいに、なってしまいます。左に画像、右にコメント（文字列）などの関係のものが、以下に複数続いたりする場合、どう考えてもテーブルのほうがよくない？って思うんですよね。その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね？ divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、 divタグはここまで作る、テーブルタグの使い分けが微妙です。このときはテーブルにしないといけない。とかないんでしょうからある意味センスなんでしょうが。。。。製作の効率と、コンテンツの管理の仕方を考えると divタグとテーブルの使い方の境目が分からなくなってしまいます。そのへんの考え方ノウハウを教えてください。

John_Papa · Accepted Answer

No.1補足に対し ----------------------- 　画像　 |　テキスト ----------------------- 　画像　 |　テキスト ----------------------- 　画像　 |　テキスト ----------------------- 　画像　 |　テキスト ----------------------- これで画像の大きさが同じならtableタグを使ってもいいですが No.1補足のレイアウトなら、１.も２.もtableを使わないほうがずっと楽です。画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である

タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。 tableのtdタグ内のフォントが、親レイアウト構成要素の

やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。ホームページビルダー（これは表でレイアウトする為に作られたようなソフトです）などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。

John_Papa · Answer

HTML5完全切り替えには10年の猶予期間があり、2022年まではHTML4のままでも使える事になっています。しかし、セキュリティ対策やマルチメディア対応などで、HTML5対応ブラウザに急速に切り替わるのではないかと予想しています。ブラウザでは早々と今月リリースされたSafri5が対応しましたが、HTML5がもうすぐ現実のホームページに登場してきます。 HTML4ではCSSでIDやclassを指定して使っていたデザイン構成タグがHTML5では次のような明快なタグに置き換えられます。 →

→

→ tableについて引用すると『テーブルをレイアウト目的で使ってはいけません。歴史的に、ページレイアウトを制御する方法として、HTML 内にテーブルを誤用するウェブ制作者がいました。この利用方法は非準拠です。ドキュメントからテーブル・データを展開しようとするツールが、非常に紛らわしい結果を取得してしまうからです。特に、スクリーン・リーダーのようなアクセシビリティ・ツールのユーザーは、レイアウト目的のテーブルがあるページのナビゲートに多大な困難を伴うことになるでしょう。』という事になります。今年いっぱいはHTML4で記述するしかありませんが、数ヶ月～数年でHTML5に移行せざるを得ない事を考えると

で作っておくべきと考えます。参考URL：http://www.html5.jp/

naokita · Answer

それは、自分の制作し易さからの判断ですよね・・・
オーサリングソフトなどから学んでしまうとそんな風に捉えちゃいますね。
非公開やユーザー、UAの事を無視すれば、どんな仕様でも構いません。
ところが、
UAの事や為を考えながら制作すると（表現すると）
その意味を活かしたい場合には、適切なHTMLやマークアップが必要です。
HTMLレベルでは、
テーブル ＝ 表です。
エクセルで作るような表を表す場合にテーブルを使います。
その違いだけです。

絶対ダメって事でもありません。作者の方針ですから。
HTMLから学べば、どちらが良いのか判断出来るでし、
制作レベルで簡単だとか難しいとかの話の問題ではありません。
HTMLレベルで適切か不適切かの問題です。
それと、読み込み順がtableではtr,tdの順に読んでしまうので、横に意味するように書かなくてはいけなくなります・・・

ちなみに、自分の場合、メニューなら ul.li で作ります。

rurino · Answer

表であればTable、レイアウトならDivです。
例えば、カレンダーは表の一種なのでTable。
料金表や商品早見表などもTable。

サイトの外見はCSSでコントロールすべし、レイアウトのためにTableを使用しない、
またTableを入れ子にしないというのが自分の基本の考え方です。

ですが、SEOは以下に検索結果にひっかかりやすくするか というものなので、
そんなものは気にしなくていい ということであれば
作業効率や印刷対応のためにテーブルでつくるものアリかなと思います。
（Floatを多用した長いページは印刷時にくずれやすいです。）

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え

No.1補足に対し

HTML5完全切り替えには10年の猶予期間があり、2022年まではHTML4のままでも使える事になっています。

それは、自分の制作し易さからの判断ですよね・・・

表であればTable、レイアウトならDivです。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング