HTML合并单元格表单

Question

我有以下结构，我应该创建HTML表格。起初对我来说似乎很容易，但是当我尝试构建它时，我花了很多时间才得到满意的结果。请查看下面的图片，看看我想要创建的表格类型。

我试图创建如下但没有运气。

    <table>
    <caption>Browsers by Visitors</caption>
    <thead>
    <tr>
        <th rowspan="3">Head One</th>
        <th colspan="3" rowspan="2">Head Two</th>
        <th colspan="3">Head Three</th>
        <th rowspan="3">Head Four</th>
        <th rowspan="3">Head Five</th>
    </tr>
    <tr>
        <th>Sub1</th>
        <th>Sub2</th>
        <th>Sub3</th>
    </tr>
    <tr>
        <th>Sub1</th>
        <th>Sub2</th>
        <th>Sub3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
    <tr>
        <td>12</td>
        <td>23</td>
        <td>34</td>
        <td>34</td>
    </tr>
    <tbody>
</table>

上述代码不起作用。请有人帮忙......

Answer 1

好的，所以在这里：

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

th, td {
    padding: 5px;
    text-align: center;
}

<table style="width:100%">
    <tr>
      <th rowspan="2">Head One</th>
      <th colspan="3">Head Two</th>
      <th colspan="3">Head Three</th>
      <th rowspan="2">Head Four</th>
      <th rowspan="2">Head Five</th>
    </tr>

    <tr>
      <td>Sub1</td>
      <td>Sub2</td>
      <td>Sub3</td>
      <td>Sub1</td>
      <td>Sub2</td>
      <td>Sub3</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>1</td>
      <td>a</td>
      <td>12</td>
      <td>s</td>
      <td>s</td>
      <td>sd</td>
      <td>aaa</td>
      <td>asd</td>     
    </tr>
    <tr>
      <td>BBB</td>
      <td>2</td>
      <td>b</td>
      <td>23</td>
      <td>sd</td>
      <td>sd</td>
      <td>sd</td>
      <td>asdasd</td>
      <td>asdasd</td>     
    </tr>
    <tr>
      <td>CCC</td>
      <td>3</td>
      <td>c</td>
      <td>34</td>
      <td>sd</td>
      <td>sd</td>
      <td>sd</td>
      <td>asdas</td>
      <td>dsafsd</td>     
    </tr>
    <tr>
      <td>DDD</td>
      <td>4</td>
      <td>d</td>
      <td>34</td>
      <td>sd</td>
      <td>sd</td>
      <td>s</td>
      <td>asdasd</td>
      <td>asddasdf</td>     
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>     
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>     
    </tr>
</table>

请尝试详细了解colspan，rowspan，th，tr，td，table折叠边框{{3} }。我删除了代码中的thead和tbody。