- ベストアンサー
divタグとテーブルの使い分けについての考え方ノウハウ
- divタグとテーブルの使い分けについての考え方ノウハウを解説します。
- サイトデザインにおいて、divタグとテーブルの使い分けは重要です。
- divタグはレイアウト用の要素、テーブルはデータの表示に向いています。
- tastykk
- お礼率18% (36/200)
- ホームページ作成ソフト
- 回答数4
- ありがとう数20
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No.1補足に対し ----------------------- 画像 | テキスト ----------------------- 画像 | テキスト ----------------------- 画像 | テキスト ----------------------- 画像 | テキスト ----------------------- これで画像の大きさが同じならtableタグを使ってもいいですが No.1補足のレイアウトなら、１.も２.もtableを使わないほうがずっと楽です。 画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。 tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。 ホームページビルダー（これは表でレイアウトする為に作られたようなソフトです）などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。
その他の回答 (3)
- John_Papa
- ベストアンサー率61% (1186/1936)
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/
- naokita
- ベストアンサー率57% (1008/1745)
それは、自分の制作し易さからの判断ですよね・・・ オーサリングソフトなどから学んでしまうとそんな風に捉えちゃいますね。 非公開やユーザー、UAの事を無視すれば、どんな仕様でも構いません。 ところが、 UAの事や為を考えながら制作すると（表現すると） その意味を活かしたい場合には、適切なHTMLやマークアップが必要です。 HTMLレベルでは、 テーブル ＝ 表です。 エクセルで作るような表を表す場合にテーブルを使います。 その違いだけです。 絶対ダメって事でもありません。作者の方針ですから。 HTMLから学べば、どちらが良いのか判断出来るでし、 制作レベルで簡単だとか難しいとかの話の問題ではありません。 HTMLレベルで適切か不適切かの問題です。 それと、読み込み順がtableではtr,tdの順に読んでしまうので、横に意味するように書かなくてはいけなくなります・・・ ちなみに、自分の場合、メニューなら ul.li で作ります。
- rurino
- ベストアンサー率55% (38/68)
表であればTable、レイアウトならDivです。 例えば、カレンダーは表の一種なのでTable。 料金表や商品早見表などもTable。 サイトの外見はCSSでコントロールすべし、レイアウトのためにTableを使用しない、 またTableを入れ子にしないというのが自分の基本の考え方です。 ですが、SEOは以下に検索結果にひっかかりやすくするか というものなので、 そんなものは気にしなくていい ということであれば 作業効率や印刷対応のためにテーブルでつくるものアリかなと思います。 （Floatを多用した長いページは印刷時にくずれやすいです。）
補足
回答を頂いたみなさん、ありがとうございます。 自分が聞きたいのは、HTML4/5とかの仕様とかそういうのじゃなく、 実際の製作における具体的なことです。 >表であればTable、レイアウトならDivです。 >例えば、カレンダーは表の一種なのでTable。 >料金表や商品早見表などもTable。 確かに、上記のようなものであれば（料金表や、商品一覧など） は明らかにテーブルにすべきでしょう、 てのは分かります。それなら自分もテーブルにしますよ。 しかし自分が聞きたいのは、 1. ----------------------- 画像 | テキスト | ←このような配置 ----------------------- ２． ----------------------- 画像 | コメント | ----------------------- | なんらかのコメント | | ----------------------- コメント | 画像 | ----------------------- このような画像とコメントを配置をするWEBページ（レイアウト）を させたい場合、例え、WEBページの見た目上の行が１行だったとしても、 複数行あったとしてもこれは、表じゃないからレイアウトにはテーブルを 使うべきじゃない。ということですか？ ちなみに、上の例で画像やテキストの周りに枠線があるとかないとかは 関係なく、配置することに対して、テーブルを使うべきか、divを使うべきかという 質問です。 よろしくお願いします。
お礼
>tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がない なるほどですね。属性の継承のことも考えたり、テーブルにしたほうがよいかどうか をその都度製作しようとする、内容（コンテンツ）によって考えることですね。 ありがとうございました。