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

Question

如何在 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>

但它不会工作。 任何人都可以帮忙吗？

Answer 1

您应该在第二行使用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

Answer 2

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

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

Answer 3

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

colspan 会帮助你。 链接到更多信息。