こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)などの関係のものが、以下に複数続いたりする場合、
どう考えてもテーブルのほうがよくない?って思うんですよね。
その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね?

divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、
divタグはここまで作る、テーブルタグの使い分けが微妙です。
このときはテーブルにしないといけない。とかないんでしょうから
ある意味センスなんでしょうが。。。。
製作の効率と、コンテンツの管理の仕方を考えると
divタグとテーブルの使い方の境目が分からなくなってしまいます。

そのへんの考え方ノウハウを教えてください。

投稿日時 - 2010-06-16 18:06:22

QNo.5973186

困ってます

質問者が選んだベストアンサー

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。
tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。
ホームページビルダー(これは表でレイアウトする為に作られたようなソフトです)などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。

投稿日時 - 2010-06-16 23:44:38

お礼

>tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がない

なるほどですね。属性の継承のことも考えたり、テーブルにしたほうがよいかどうか
をその都度製作しようとする、内容(コンテンツ)によって考えることですね。

ありがとうございました。

投稿日時 - 2010-06-17 00:00:15

このQ&Aは役に立ちましたか?

19人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

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

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

参考URL:http://www.html5.jp/

投稿日時 - 2010-06-16 18:55:40

ANo.2

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

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

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

投稿日時 - 2010-06-16 18:51:41

ANo.1

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

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

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

投稿日時 - 2010-06-16 18:38:40

補足

回答を頂いたみなさん、ありがとうございます。

自分が聞きたいのは、HTML4/5とかの仕様とかそういうのじゃなく、
実際の製作における具体的なことです。

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

確かに、上記のようなものであれば(料金表や、商品一覧など)
は明らかにテーブルにすべきでしょう、
てのは分かります。それなら自分もテーブルにしますよ。

しかし自分が聞きたいのは、

1.
-----------------------
 画像  | テキスト | ←このような配置
-----------------------

2.
-----------------------
 画像  | コメント | 
-----------------------
|
なんらかのコメント |
|
-----------------------
コメント | 画像 | 
-----------------------

このような画像とコメントを配置をするWEBページ(レイアウト)を
させたい場合、例え、WEBページの見た目上の行が1行だったとしても、
複数行あったとしてもこれは、表じゃないからレイアウトにはテーブルを
使うべきじゃない。ということですか?

ちなみに、上の例で画像やテキストの周りに枠線があるとかないとかは
関係なく、配置することに対して、テーブルを使うべきか、divを使うべきかという
質問です。

よろしくお願いします。

投稿日時 - 2010-06-16 20:31:28

あなたにオススメの質問