如何创建此HTML表

Question

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

我在第一行遇到第二和第三个问题。我一直在玩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>

Answer 2

您最初必须考虑7列。试试以下

table, th, td {
    border: 1px solid black;
    }

    <table style="width:100%">
      <tr>
        <td>Jill</td>
        <td colspan="3">Smith</td>
        <td  colspan="3">Smith</td>
      </tr>
      <tr>
         <td>Jill</td>
        <td colspan="2">Smith</td>
        <td colspan="2">50</td>
        <td colspan="2">Jill</td>
      </tr>
    </table> 

Answer 3

试试这个

             <table>
                <tr>
                    <td>td</td>
                    <td>
                        <table>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>td</td>
                    <td>
                        <table>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

Answer 4

colspan将始终与上/下行列对齐。要解决这个问题，找一个合并单元格的公共乘数（在你的情况下，6. 6可以分组为3x2宽度跨度或2x3宽度跨度）。创建一个包含1（最左边的列）+6列总共7列的表。然后合并顶行3列和3列。对于第二行合并2列3次。

像这样：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>