带有CSS显示表的三列布局,第一行有多行?

时间:2012-06-15 23:24:50

标签: css css-tables

我正在开发一个新网站:

  1. 有3列 - 每列是一个单元格
  2. 第一列有3行(徽标,导航,图标) - 有一个带显示的Div:表格用display:table-row包裹3个div。
  3. 其他两列只有1行。中间列是内容区域。
  4. 然而,因为这是我第一次使用display:table,所以我遇到了一些对我来说不太清楚的事情。我试图避免浮动div。

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

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

1 个答案:

答案 0 :(得分:0)

这样的事情怎么样?

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