HTML表格应用实例

下面是关于带标题的跨行跨列表格的简单实例。

要求实现的表格如图所示：

首先，我们对上述表格的结构进行分析，具体如下：

1）表格的最上方为标题，我们需要使用<caption></caption>标签实现。

2）“名称”、“小计”单元格跨两行，因此需要使用<th rowspan="2">名称</th>来实现；

      “2016-11-22”单元格跨两列，因此需要使用<th colspan="2">2016-11-22</th>实现；

      “总价”单元格跨三列，因此需要使用<th colspan="3">总价</th>实现； 

       其他单元格使用<td></td>标签。

接下来，我们通过代码实现该功能，具体如图：

运行即可。

谢谢观看！