HTML 布局 - 嵌套的行和列答案

【问题标题】：HTML Layout - nested rows and columnsHTML 布局 - 嵌套的行和列
【发布时间】：2018-06-07 20:25:06
【问题描述】：

根据上图，用我的理解，我有这段代码

<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 标签' 时，盒子的布局将在那里，但是一旦我添加了 'tr 标签'，一切都会变得混乱。有没有其他方法可以像所附图片一样创建布局？

【问题讨论】：

该表看起来有问题。它有一个不正确的标签结构，你可以使用这样的东西：divtable.com/generator，来生成正确的表格布局，看看你是否可以嵌套需要的表格。如果您在创建布局时需要帮助，请告诉我。
正确的方法是使用 CSS 和普通的 HTML 元素。您是否出于任何特定原因使用过桌子？此外，您不能在 'td' 下放置 'tr'，这是列中的一行 - 该行必须首先进入一个新的表格元素。

标签： html layout html-table

【解决方案1】：

基本结构是

<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>

【讨论】：

谢谢，但是对于图像方面，我如何使文本围绕两个图像看起来像我在问题中发布的图像？