如何使一个 < td > 跨越两列表中的两列？

click to see the image

如何在 HTML 和 CSS 中创建类似上面示例的表。我试过以下方法:

<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>

但没用的，有人能帮忙吗？

html
css

107895 次浏览

小开

最佳答案

你应该使用 colspan作为你的第二行，像这样:

<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>

学习-> HTML Colspan

小开

<td>有一个 colspan属性，用于确定应该跨越多少列。您的示例需要跨越两列，因此清理后的代码如下所示:

<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

小开

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>

可以帮助你