HTMLレイアウト - ネストされた行と列

上記画像によるが、私の理解を使用して、私は下の「TRタグ」を含んでいなかったとき

<table> 
    <tr> 
     <td style="width:30%";> 
      <tr>A</tr> 
      <tr> 
       <td style="width:33%;">B</td> 
       <td style="width:33%;">C</td> 
       <td rowspan="2" style="width:33%;">D</td> 
      </tr> 
      <tr><td colspan="2">E</td></tr> 
     </td> 
     <td style="width:70%";> 
      <tr>Lorem Ipsum ... <img src="pic.jpg"></tr> 
      <tr><img src="pic.jpg">Lorem Ipsum ... </tr> 
     </td> 
    </tr> 
</table>

しかし、このコードを持っています " tdタグ '30％または70％、ボックスのレイアウトはそこにありますが、' trタグ 'を追加すると、すべてがちょうど乾杯になります。画像のようにレイアウトを作成する方法はありますか？

出典

2017-12-27 LSY.E

です。タグ構造が正しくない場合は、次のようなものを使用できます。http://divtable.com/generator/正しい表レイアウトを生成し、必要な表をネストできるかどうかを確認します。レイアウトを作成する手助けが必要な場合は教えてください。 – adelriosantiago

正しい方法は、通常のHTML要素でCSSを使用することです。何らかの理由でテーブルを使用しましたか？また、 'tr'を 'td'の下に置くことはできません。これは列の中の行です。行は新しい表要素の中に最初に入っていなければなりません。 –

基本的な構造は、何かがそのテーブルと間違って見えます

<html> 
<head> 
    <title>table layout</title> 
    <style type="text/css"> 
     table { 
      border-collapse: collapse; 
     } 

     table, th, td { 
      border: 1px solid black; 

     } 
    </style> 
</head> 
<body> 
    <table style="width: 100%"> 
     <tr> 
      <td style="width: 30%"> 
       <table style="width: 100%;height: 400px;"> 
        <tr><td colspan="3">A</td></tr> 
        <tr> 
         <td style="width:33%;">B</td> 
         <td style="width:33%;">C</td> 
         <td rowspan="2" style="width:33%;">D</td> 
        </tr> 
        <tr><td colspan="2">E</td></tr> 
       </table> 
      </td> 
      <td style="width: 70%"> 
       <table style="width: 100%;height: 400px"> 
        <tr><td><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ... </p><img src="banner-test.jpg" style="width: 200px;float: right"></td></tr> 
        <tr><td><img src="banner-test.jpg" style="width: 200px" >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum ... </td></tr> 
       </table> 
      </td> 
     </tr> 

    </table> 
</body>

出典

2017-12-27 08:03:12 Chandraveer

ありがとうございますが、画像の側では、テキストを両方の画像の周りにラップして、質問に投稿した画像のように見えるようにするにはどうすればよいですか？ –

HTMLレイアウト - ネストされた行と列

答えて

関連する問題