web-dev-qa-db-ja.com

<div>を<tr>に：正しいですか？

このコードは正しいですか？

<table>
    <tr>
        <td>...</td>
    </tr>

    <tr>
        <div>...</div>
    </tr>

    <tr>
        <td>...</td>
    </tr>    
</table>

セマンティック（およびW3Cルール）についてはわかりません。あなたは何について言うことができますか？

htmlhtml-tabletablerow
16
markzzz

いいえ、無効です。 tr要素には、thおよびtd要素のみを含めることができます。 HTML4仕様 から：

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>
24
Felix Kling

有効ではないだけでなく、機能しません！このマークアップ

<table>
    <tr>
        <td>The First Row</td>
    </tr>

    <tr>
        <div>The Second Row</div>
    </tr>

    <tr>
        <td>The Third Row</td>
    </tr>    
</table>

これを表示します

The Second Row
The First Row
The Third Row

Divは完全にテーブルから排出され、DOMの前に配置されます

参照してください http://jsfiddle.net/ELzs3/1/

13
Alohci

いいえ、実際にはdivはブロックレベルの要素なので、テーブル内では使用しないでください。 CSSで動作をオーバーライドできますが、それが目的の場合、W3Cでは検証されません。

5
shanethehat

いいえ、<div>内で<tr>を使用しないでください。これは<td>内で使用できます。テーブルは適切にネストされたテーブルであるため、これはベストプラクティスではない場合があります。実際には、divまたは任意の要素の表示設定をオーバーライドできます。実際には、<div>（デフォルトはブロック）をテーブルセルとして表示することも、その逆も可能です。

4
SLB

これは互換モードで動作しますが、標準モードと互換性のあるブラウザーは、Doctypeによっては動作しません。互換モードを回避することは、ブラウザーに互換性のあるWebコンテンツを正常に作成するための鍵の1つです

一部の最新のブラウザには2つのレンダリングモードがあります。 Quirkモードは、HTMLドキュメントを、以前のブラウザなどのようにレンダリングします。 Netscape 4、Internet Explorer 4および5。標準モードでは、W3Cの推奨に従ってページがレンダリングされます。 HTMLドキュメントに存在するドキュメントタイプ宣言に応じて、ブラウザは互換モードまたは標準モードに切り替わります。ドキュメントタイプの宣言がない場合、ブラウザは互換モードに切り替わります。

http://www.w3.org/TR/REC-html32#dtd

JavaScriptは異なる動作をするべきではありません。ただし、JavaScriptが操作するDOMオブジェクトの動作は異なる場合があります。

2
Pir Abdul

一般的に、テーブルの行に5つの列があり、divがテーブルの全幅を占めるようにするとします。次はトリックをするべきです。

<tr>
  <td colspan=5>
    <div class="some-class">
      <p>Hey</p>
    </div>
  </td>
</tr>
1
daneczech