html - 如何创建此 HTML 表格，其行 tds 跨越多列

Question

如何创建具有以下布局的表格？

我在第一行的第二个和第三个 td 上遇到问题。我一直在玩 colspan 但无法让它工作。

Answer 1

想象一个每行有 7 个单元格的表格来获取单元格分布(1 + ( 2 * 3 ) 个单元格)并使用 colspan 属性，如下所示:

table {
width: 100%;
}
td {
  border: 1px solid #777;
  padding: 10px;
}
td:first-child {
  width: 30%;
}

<table>
  <tr>
    <td>a</td>
    <td colspan="3">b</td>
    <td colspan="3">c</td>
  </tr>
  <tr>
    <td>a</td>
    <td colspan="2">b</td>
    <td colspan="2">c</td>
    <td colspan="2">d</td>

  </tr>
</table>