表 colspan 和 rowspan答案

【问题标题】：Table colspan & rowspan表 colspan 和 rowspan
【发布时间】：2021-06-23 22:07:30
【问题描述】：

我对@987654323@ 和rowspan 有一点问题。我正在尝试制作下表：

但我卡在第二个带有行跨度的字幕：

<table border="1">
      <tr>
        <th colspan="3"><h1>DIVING</h1></th>
      </tr>
      <tr>
        <td colspan="2">col 1 row 1</td>
        <td>col 1 row 1</td>
      </tr>

      <tr>
        <td>col 1 row 1</td>
        <td>col 1 row 1</td>
        <td>col 1 row 1</td>
      </tr>


</table>

当我把第二个<tr> 和<td> 放在一起时，它跟在第一个字幕之后，而不是第二个：

【问题讨论】：

标签： html html-table

【解决方案1】：

从图片上看，您有 4 列（不是 3 列）。试试这样的；

<table>
    <tr>
        <th colspan="4"><h1>DIVING</h1></th>
    </tr>
    <tr>
        <td colspan="2">col 1&2 row 2</td>
        <td colspan="2">col 3&4 row 2</td>
    </tr>
    <tr>
        <td>col 1 row 3</td>
        <td>col 2 row 3</td>
        <td>col 3 row 3</td>
        <td>col 4 row 3</td>
    </tr>
</table>

然后重复第三行，将第二行复制为最后一行。

http://jsfiddle.net/D9VxN/

【讨论】：

【解决方案2】：

这应该给你那个

<table border="1" width="300px" style="border-collapse: collapse;">
    <tr>
        <td colspan="4"><center>Title</center></td>
    </tr>
    <tr>
        <td colspan="2"><center>subtitle</center></td>
        <td colspan="2"><center>subtitle</center></td>
    </tr>
    
    <tr>
        <td>
            <div>1 item</div>
            <div>1 item</div>
            <div>1 item</div>
        </td>
        <td>
            <div>123</div>
            <div>123</div>
            <div>123</div>
        </td>
        <td>
            <div>1 item</div>
            <div>1 item</div>
            <div>1 item</div>
        </td>
        <td>
            <div>123</div>
            <div>123</div>
            <div>123</div>

        </td>
    </tr>

    <tr>
        <td colspan="2"><center>subtitle</center></td>
        <td colspan="2"><center>subtitle</center></td>
    </tr>
</table>

【讨论】：