HTMLテーブル構造がフラットになっています

ここに、強力なinternets！私は電子メール（ugh！）をコーディングしているので、明らかにそれは私が10年で書いた以上のテーブルを意味する。いくつかの非難されたプロパティが無視される方法とは別に、ブラウザはテーブルの構造を平坦化するようです。HTMLテーブル構造がフラットになっています

だから、these tables hereがあるとします。最初の出力は2列のレイアウトで、期待どおりに出力されます。 2番目のものはありません。 trとtd要素を追加すると、セルの内部を含むため、実際にレイアウトが破損します。

結果を確認するには、出力結果を確認します。 2番目の表はtrタグの束になります。幅制御td：

<td width="264" valign="top"></td>

代わりに、その子trとtdタグを含有する、空の要素としてレンダリングされます。

私の質問：なぜそれが起こっているのか知っていますか？

EDIT：参考のために、W3Cバリデーターはの迷惑エンドタグの文句を言いますが、正しく処理しています。このHTMLはPugテンプレートから自動生成されたもので、私はそれが無効だとは思わない。

出典

2016-12-07 Anonymous

簡単な間違い - 顔面を用意してください。

ネストした表を開始するのを忘れてしまった、別名では、新しいTRタグの前に内部テーブルのテーブル・タグを入れるのを忘れてしまった。

ネストした表を使用する場合は、構造体はTABLE-TR-TD-TABLE-TR-TD- CONTENTである必要があります。

以前は：TABLE - TR - TD - TR - TD - CONTENT - 自分のコードを修正し、TRを有効な形式に移動しようとしました。

を修正HTMLについては、以下を参照してください：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <table width="600" cellpadding="0" cellspacing="24" border="0"> 
    <tr> 
     <td width="264" valign="top"> 
     <h3>Alles auf einen Blick</h3> 
     <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p> 
     <button>Jetzt informieren</button> 
     </td> 
     <td width="264" valign="top"> 
     <h3>Schnell zur Lösung</h3> 
     <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p> 
     <button>Jetzt entdecken</button> 
     </td> 
    </tr> 
    </table> 

    <hr> 

    <table width="600" cellpadding="0" cellspacing="24" border="0"> 
    <tr> 
     <td width="264" valign="top"> 
     <table width="100%"> 
      <tr> 
      <td> 
      <h3>Alles auf einen Blick</h3> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <button>Jetzt informieren</button> 
      </td> 
     </tr> 
      </table> 
     </td> 
     <td width="264" valign="top"> 
     <table width="100%"> 
      <tr> 
      <td> 
      <h3>Schnell zur Lösung</h3> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <button>Jetzt entdecken</button> 
      </td> 
     </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

出典

2016-12-07 15:08:25 Gortonington

ですから、 'td'タグ'内tr'ていませんか？コンテナとして追加の 'table'が必要ですか？ –

ええ、それは合法です。私は余分な 'table'タグを追加して動作します。：facepalm： –

HTMLテーブル構造がフラットになっています

答えて

関連する問題