html - 在表的顶部创建子列

Question

我想知道如何使用 CSS/HTML 来划分表格的第一行，如下所示：

我知道，如果我想让它们处于底部，我可以使用类似的东西：

.subcol{
width: 180 px;
}

这样做，但我似乎找不到任何方法让子列出现在顶部，而不是底部。现在我正在尝试使用它：

.col1{
float: left;
width: 795px;
padding-right:15px;

}

.col2{
float: left;
width: 320px;
}

然后，我用 DIV 把它放在一起：

<div class="col1">VIDEO></div>
<div class="col2">TEXT BOX</div>

对此有什么建议吗？

Answer 1

恰恰相反：您创建一个跨越 2 列的单元格，而不是将一个单元格一分为二。它是由colspan属性制成的（与 垂直存在相同rowspan）。

见小提琴：http: //jsfiddle.net/PhilippeVay/nFGYq/

重要提示：您为什么首先使用表格布局？你不应该那样做。使用div或其他元素并使用 CSS 设置样式。

HTML

<table>
    <tr>
        <td>Video</td>
        <td>Small text box</td>
    </tr>
    <tr>
        <td colspan="2">Text and pictures</td>
    </tr>
</table>

CSS

table {
    table-layout: fixed; /* will force browsers to stick to widths you want, not adapt to the content of various cells as usual */
    width: 400px;
}
tr:first-child td {
    width: 120px; /* 120 + 40 + 40 = 200 */
}
td {
    border: 1px solid grey;
    padding: 40px;
}

Answer 2

你可以使用表

<table>
<tr>
<td>video</td>
<td>small text box</td>
</tr>
<tr>
<td colspan=2>text and picture</td>
</tr>
</table>

希望这可以帮助

Answer 3

如果你把区域划分为div，你只需要改变它们在HTML中的顺序——你可以把两个区域放在上面，然后在它们下面放一个clearing div，这样文字和图片如下所示两者（并清除浮动）。