使用 rowspan 和 colspan 的 HTML 表格

Question

我正在尝试创建一个像这张图片中的 HTML 表格；

我尝试了以下但没有奏效。

 <table border="1"> <tr> <th rowspan="2" colspan="2">1,1</th> <td>1,1</td> </tr> <tr> <td>1,1</td> </tr> <tr> <td>1,1</td> <td colspan="2">1,1</td> </tr> </table>

Answer 1

你可以试试这个：

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

 <table> <col width=100><col width=100><col width=100> <tr> <td colspan="2" style="border-bottom: none;">1,1</td> <td>1,3</td> </tr> <tr> <td colspan="2" style="border-top: none;"></td> <td>2,3</td> </tr> <tr> <td>3,1</td> <td colspan="2">3,2</td> </tr> </table>

Answer 2

嗨，您的代码很好，只需添加即可查看差异

 <table border="1"> <tr> <th rowspan="2" colspan="2" style="width: 95px;">1,1</th> <td>1,1</td> </tr> <tr> <td>1,1</td> </tr> <tr> <td style="width: 20px;">1,1</td> <td colspan="2">1,1</td> </tr> </table>

Answer 3

这是使用rowspan和colspan在图片中构建表格的方法：

 table { width: 100%; border-collapse: collapse; } td { border: 1px solid black; text-align: center; width: 33%; }

 <table> <tr> <td colspan="2" rowspan="2">1,1</td> <td>1,3</td> </tr> <tr> <td>2,3</td> </tr> <tr> <td>3,1</td> <td colspan="2">3,2</td> </tr> </table>