下面是关于带标题的跨行跨列表格的简单实例。
要求实现的表格如图所示:
首先,我们对上述表格的结构进行分析,具体如下:
1)表格的最上方为标题,我们需要使用<caption></caption>标签实现。
2)“名称”、“小计”单元格跨两行,因此需要使用<th rowspan="2">名称</th>来实现;
“2016-11-22”单元格跨两列,因此需要使用<th colspan="2">2016-11-22</th>实现;
“总价”单元格跨三列,因此需要使用<th colspan="3">总价</th>实现;
其他单元格使用<td></td>标签。
接下来,我们通过代码实现该功能,具体如图:
运行即可。
谢谢观看!