如何制作包含合并单元格的 HTML 表格答案

【问题标题】：How to make an HTML table with merged cells如何制作包含合并单元格的 HTML 表格
【发布时间】：2022-01-17 17:32:43
【问题描述】：

如何使这张表像第一个数字？我需要了解的不仅仅是制作代码，请

我不明白为什么下面的代码不起作用：

table,
td,
th {
  border: 2px solid gray;
  text-align: center
}

         <table width="30%">
       <tr>
        <td> 1 </td>
        <td> 2 </td>    
        <td rowspan="4">3</td>
        </tr>

       <tr> 
        <td> 4</td>
        <td rawspan="4">5 </td>
        <td>7 </td>
        </tr>

        <tr>
        <td rowspan="6"> 6 <td>
        <td>9</td>
        <td>8</td>
         </tr>  

         <tr>
        <td>11</td>
        <td>12</td>
        <td rawspan="3">10</td>
         </tr>  
    </table>

【问题讨论】：

我希望代码像第一张图一样显示，我不明白为什么

标签： html html-table

【解决方案1】：

如果你想让整个表格都一样，那么你可以使用这个：

CSS：

  td {
  width: 33.3333%; 
  height: 28px;
  text-align: center;
  text-wrap: none;
  }
  
  tr {
  height: 28px;
  }
  
  table {
  border-collapse: collapse; width: 48.3284%; height: 56px;"
  }

HTML：

<table>
<tbody>
<tr>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>

【讨论】：

不行，我得把桌子弄成图中的第一个数字
它没有回答 OP 的问题，他主要是在与rowspans 斗争。

【解决方案2】：

当您构建table 时，您需要考虑表rows。试着把你的表切开，你会看到总共有六行三列。因此，从 6x3 表开始并稍后添加必要的rowspans 可能更容易。

当您添加rowspan 时，不要忘记该单元格会向下扩展，因此在下一行（或rowspan="3" 之后的那一行）您需要删除该td 单元格。

查看下面的 sn-p：

table {
  border: 1px solid;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
}

td {
  border: 1px solid;
  text-align: center;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td>4</td>
    <td rowspan="3">5</td>
  </tr>
  <tr>
    <td rowspan="3">6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td rowspan="2">10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

【讨论】：