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>标签。

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

运行即可。

谢谢观看!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容