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

올바른 방법은 CSS를 일반적인 HTML 요소와 함께 사용하는 것입니다. 특별한 이유가있을 때 테이블을 사용 했습니까? 또한, '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 레이아웃 - 중첩 된 행과 열

답변

관련 문제