如何制作具有 2 列合并和 2 行合并的 HTML 表格？答案

【问题标题】：How to make HTML table with 2 column merge and 2 row merge?如何制作具有 2 列合并和 2 行合并的 HTML 表格？
【发布时间】：2021-07-06 02:06:36
【问题描述】：

我需要 A & B Colum 来合并，还需要 1 & a row marge。这里我使用 colspan 来合并 A 和 B，也使用 rowspan 来合并 1 和一行。但结果不符合我的需要。我需要看起来像这张图片 Demo Table

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
 text-align: left;    
}

<table>
 <tr>
   <td colspan="2">A</td>
   <td colspan="2">B</td>
   <td>C</td>
 </tr>
 <tr>
   <td rowspan="2">1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan="2">a</td>
   <td>b</td>
   <td>c</td>
 </tr>
</table>

【问题讨论】：

标签： html-table row multiple-columns

【解决方案1】：

我认为解决了你提到的问题。你可以试试。我希望您对解决方案感到满意。谢谢。

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
 text-align: left;    
}

<table>
 
 <tr>
   <td colspan="2">A</td>
   <td>C</td>
 </tr>
 <tr>
   <td rowspan="2">1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>a</td>
   <td>b</td>
 </tr>
</table>

【讨论】：