TD内のDIVは悪い考えですか？

143

私はどこかで<div>内部がノーノーであると聞いた/読んだよう<td>です。それが機能しないわけではなく、ディスプレイのタイプに基づいて実際に互換性がないということだけです。私の直感を裏付ける証拠が見つからないので、私は完全に間違っているかもしれません。

html  html-table  semantic-markup  web-standards 
— jcollum
ソース

回答:

144

divinstide a を使用することtdは、レイアウトにテーブルを使用する他の方法よりも悪くはありません。（ただし、レイアウトにテーブルを使用しない人もいますが、私もその1つです。）

ただしdiv、a tdをa で使用すると、要素のサイズがどのようになるかを予測するのが難しい場合があります。divのデフォルトでは、親から幅を決定し、テーブルセルのデフォルトでは、コンテンツのサイズに応じてサイズを決定します。

aのdivサイズ変更のルールは標準で十分に定義されていますが、aのtdサイズ変更のルールは十分に定義されていないため、ブラウザごとに若干異なるアルゴリズムを使用しています。

— グッファ
ソース
これは私の直感がどこから来たのかと思います。片付けていただきありがとうございます。
— jcollum 2009
9
列の幅が事前に指定されている場合は、問題ありません。ブラウザーが幅を上書きしないようにtable-layout：fixedをテーブルに設定することを忘れないでください（潜在的に問題を引き起こす可能性があります）
— Jens Roland
6
彼はレイアウトにテーブルを使用しているとは決して言っていません。
— 16
@texelate table-layout:fixedCSSは、あなたが思っているものではありません。最初の行のサイズのみを計算することにより、テーブルをレンダリングするときにブラウザーが行う計算の量を減らします。
— SteveB 2016
73

XHTML DTDを確認したところ、<TD>要素に見出し、リスト、および<DIV>要素などのブロック要素を含めることが許可されていることがわかりました。したがって、<TD>要素内で<DIV>要素を使用しても、XHTML標準に違反しません。他の最新のHTMLバリエーションにも<TD>要素と同等のコンテンツモデルがあると確信しています。

関連するDTDルールは次のとおりです。

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
— マーティン・リバーセージ
ソース
1
これが私が探していた具体的な答えです。よろしくお願いします。今夜は少し良く眠れると思います。
— 3Dom
ペックに裏打ちされた唯一の答え。
— peterchaula
DTDのどこでこれが説明されているかを教えてください。読みやすい文書ではありません。ありがとう！
— しのばせる
1
@redolent：関連するDTDルールを回答に追加しました。
— Martin Liversage 2017
XHTMLではないHTML5仕様についてはどうですか？
— クラッシュ
38

いいえ、必ずしもそうとは限りません。

TD内にDIVを配置する必要がある場合は、TDを適切に使用していることを確認してください。表形式データとセマンティクスを気にしない場合、最終的にはTDのDIVを気にしません。でも問題はないと思います-もしあなたがそれをしなければならないなら、あなたは大丈夫です。

HTML仕様によると

<div>ここで、配置することができるフローコンテンツが期待されている1である、<td>コンテンツモデル2。

— サンプソン
ソース
2
私は常に「はい」または「いいえ」で質問に答えたいと思っていました;）
— Jani Hartikainen
+1-本当にもっと良いもので答えたかったが失敗した。
— karim79 2009
これはより多くの賛成を得ましたが、Guffaはここで取り上げられていないポイントを持ち出したと思います（そして私の直感の原因かもしれません）
— jcollum 2009
14

テーブルセルにはブロックレベルの要素を合法的に含めることができるため、本質的に偽物ではありません。もちろん、ブラウザーの含意は、これを推測的な理論上の立場のままにします。レイアウトの問題やバグを引き起こす可能性があります。

テーブルがレイアウトに使用されたように-そして時にはそれでも-ほとんどのブラウザーがコンテンツを適切にレンダリングすると思います。IEでも。

— デビッドはモニカを復活させると言います
ソース
ブラウザの実装が「待て、それは悪い考えだ」と私が思ったところだと思う。
— jcollum 2009
13

位置を使用する場合：絶対; divとposition: relative;tdで問題が発生します。FF、サファリ、および（あなたが期待するように）、クロム（マックではなく、PCけれども）が、これはとのdivについても同様であるTDにDIVを位置決めしませんdisplay: table-whatever;、あなたは2 div要素が必要であることをやりたいので、もしに1つコンテナwidth: 100%; height: 100%;で境界線がないため、視覚的な影響なしにtdを塗りつぶします。そして絶対的なもの。

それ以外はなぜセルを分割しないのですか？

— ジール
ソース
6
唯一の実用的な、非聖戦の答え
— アントニー・ハッチキンス2012年
2

私は<div>内部を配置することによって問題に直面しました<td>。

document.getElementById()td内に配置した場合、divを識別できませんでした。しかし、外では、問題なく動作していました。

— ヒマジャ
ソース
1

みんなが言ったように、それはレイアウトの目的には良い考えではないかもしれません。私は同じことを考えていて、それが有効なコードであるかどうかだけ知りたかったので、この質問に到着しました。

有効であるため、他の目的に使用できます。たとえば、私がそれを使用するのは、テーブルの行の中にいくつかの派手な「CSSed」divを置き、次にユーザーが価格、名前などで情報をソートできるようにするクイックjQuery関数を使用することです。このように、レイアウトテーブルだけが「垂直方向の順序」を提供しますが、CSSによってdivの幅、高さ、背景などを制御します。

— フアンイグナシオ
ソース
-4

それは意味論を壊します、それだけです。正常に動作しますが、「セマンティクスを壊す」と、スクリーンリーダーなど、HTMLの処理を楽しむことができなくなる可能性があります。

— グレッグ
ソース
13
@グレッグ、なぜそれが意味論を壊すのですか？divは、単にページコンテンツのブロックレベルの分割、またはサブ分割です。そのため、それらをテーブルセル内に配置することは、本質的かつ取消不能な意味論ではありません。
— デビッドはモニカを
2
私はあなたにいくつかの返答を書いて私の答えを正当化しようとしましたが、私は個人的な意見に行き着きました。：/私の最良の応答は、セル内のすべてのものはおそらく別のHTMLタグでより適切に表現できると思います。セルを本当にコンポーネントに分割する場合は、おそらく最初からテーブルを使用してはならず、レイアウトに一連のDIVをスタイルする必要があります。なぜ私がこれをより良い言葉にできないのかわからない...私見ではそれをチョークすると思います。
— グレッグ、
うーん、TDは意味的にはDIVと同じであるため、2つ続けて使用するのですか？
— jcollum 2009
2
@jcollum：いいえ、意味的に同じであるとは言えません。TDは間違いなく表のセルです。これは既知の構造の一部です。テーブルには行があり、行にはセルがあり、セルにはデータが含まれています。DIVは単なるコンテナーです...いつでもドキュメントのどこにでも何でも表すことができます-マークアップの目的の観点から意味を取得するには、それにスタイルを適用する必要があります。
— グレッグ、
7
DIVは意味的に意味がないので、それがどのように間違っているかはわかりません。
— レックスM
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.