html如何用一行代码创建表格,HTML 表格练习题

本节将为大家讲解 HTML 如何实现下图所示表格效果，先来看看最终实现效果吧！

table.png

新建 table.html 文件，并输入以下框架代码(本文编辑器采用Notepad++)；

对题目要求表格进行分析，可以发现该表格包含：表格标题，表头和内容三部分，且表格共有五行。首先我们先创建表格标题，caption 标签指定表格标题，代码如下所示：

其次，创建五行内容，其中两行为表头，三行为内容。行用

标签表示，代码如下所示：

其次，构建表头。表头包含两行，“名称”和“小计”均占用两行一列行，“2016-11-22”占用一行两列，“重量”和“单价”均占用一行一列。rowspan 属性指定单元格占用行数，colspan 属性指定单元格占用列数，因此表头构建代码如下所示：

购物车
名称	2016-11-22		小计
名称	重量	单价	小计

接下来，填充表格第3~4行内容，代码如下所示：

购物车
名称	2016-11-22		小计
名称	重量	单价	小计
苹果	3公斤	5元/公斤	15元
香蕉	2公斤	6元/公斤	12元

最后，填充表格第5行内容，其中“总价”占用一行三列，且居中显示。属性colspan="3"实现单元格占用三列效果，属性align="center"实现居中显示效果，因此表格最终代码实现如下所示：

购物车
名称	2016-11-22		小计
名称	重量	单价	小计
苹果	3公斤	5元/公斤	15元
香蕉	2公斤	6元/公斤	12元
总价			27元

html如何用一行代码创建表格,HTML 表格练习题相关推荐

解决POI事件驱动模式读取不到Java代码创建的Excel表格数据问题
场景使用POI官网上的事件驱动模式的示例方法,读取单sheet单次创建的Excel表格文件(.xlsx),Microsoft Excel和WPS Excel创建的表格文件可以正常读取数据,但是jav ...
如何用一行代码, 让老板开除你？
专栏 | 九章算法网址 | www.jiuzhang.com 哈喽,艾薇波地!又到了1024,一年一度的程序员节啦! 今天,程序员们每敲出的一行代码,都隐藏这巨大的威力.比如: 一行代码可以让老板开 ...
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼. 问题描述:编号为 1-N 的 N 个 ...
开源神器：如何用一行代码快速下载 B 站等全网视频！
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 大家前两天朋友圈应该都被何冰老师<后浪>演讲视频刷屏了,小破站属 ...
如何用一行代码画个迷宫？
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 今天来看看 Python 到底能有多疯狂! 作者 | 猿媛牧场大家都知道 Python 的 ...
教大家如何用一行代码打造下载神器！下载全网视频、音频、图像！太牛了！
今天就浓重的给大家介绍一款神器 --you-get 这里说全网可能一点夸张,但如果实际上去使用you-get下载媒体文件(视频.音频.图像),对于主流的平台几乎都可以满足需求. 目前you-get支持 ...
看看大佬是如何用一行代码实现网页变灰的效果的
4月4日清明节,全国人民一起哀悼新冠肺炎牺牲烈士和逝世同胞. 清明时节雨纷纷,逝去的同胞,英雄一路走好. 网站变灰昨天我们看到很多网站主页和内容都变成了灰色,包括按钮,图片,是如何做到的呢? 实现方 ...
“别人家的小孩”是如何用一行代码手撕面试题的？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 前几天,有网友放出了网易最近3道面试题目并迅速定位到Le ...
Sympy常见多个变量【一行代码创建】
解决办法 import sympy vrs = sympy.symbols('x1:10') 输出的结果是: (x1, x2, x3, x4, x5, x6, x7, x8, x9) 其实是一个元组, ...

html如何用一行代码创建表格,HTML 表格练习题

html如何用一行代码创建表格,HTML 表格练习题相关推荐

最新文章

热门文章