如何在两列表中跨越两列？

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>

学习 - ＆gt; HTML Colspan

Answer 2

<td>s have a colspan attribute确定它应该跨越多少列。您的示例有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将为您提供帮助。 Link to more info.