Question

根据上面的图片，根据我的理解，我有这个代码

<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标签'，一切都会变得混乱。有没有其他方法来创建布局，如附加图像？

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

HTML布局 - 嵌套的行和列

1 个答案: