css - 带有 CSS 显示表的三列布局，第一行有多行？

Question

我正在开发一个新网站：

1. 有 3 列 - 每列都是一个单元格
2. 第一列有 3 行（徽标、导航、图标） - 有一个带有 display: 的 Div 表，它用display:table-row.
3. 其他两列只有 1 行。中间列是内容区域。

然而，由于这是我第一次使用display:table，我遇到了一些对我来说不太清楚的事情。我试图避免浮动div。

1. 如果我需要多行，每列每行有一个单元格，我是将每个单元格嵌入一行还是只创建每一行而不声明单元格。我了解浏览器会自动创建缺少的元素，但我想确保我正确地执行此操作以避免由于浏览器自动创建缺少的元素而可能发生的任何副作用。

编辑：

我认为我的大脑工作过度了，我想我可以通过在第一列中使用 3 个 div 而不是使用带有行的嵌套表 div 来实现这一点。这只是突然出现在我的脑海中。

Answer 1

这样的事情怎么样？

<table>
    <tr>
        <td>
            Content One
        </td>
        <td>
            Content Two
        </td>
        <td>
            Content Three
        </td>
    </tr>
    <tr>
        <td colspan="3">
            MainVontent Four
        </td>
    </tr>
</table>

还是像这样？

<table>
    <tr>
        <td>
            Content One
        </td>
        <td>
            Content Two
        </td>
        <td>
            Content Three
        </td>
    </tr>
    <tr>
        <td>
            <!-- INTENTIONALLY BLANK -->
        </td>
        <td>
            MainVontent Four
        </td>
        <td>
            <!-- INTENTIONALLY BLANK -->
        </td>
    </tr>
</table>