用html5代码制作表格

制作HTML5的表格

使用HTML5制作表格,是特别容易的事情,下面介绍一下制作方法。

1、HTML5表格的主要元素:

HTML5的表格包括table、caption、tr、td、th五个主要元素:

table元素:定义一个表格;

caption元素:定义表格的标题;

tr元素:定义表格的一行,tr是table row的缩写;

td元素:定义表格单元,td是table data的缩写;

th元素:定义表头,th是table head的缩写。

2、制作一个简单的表格

下面这个HTML文档,制定了一个学生常用的课表:

<!DOCTYPE html><html><head><title>table001</title><meta charset="utf-8" /></head><body><table><tr><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>

使用浏览器打开这个文档时,效果如下:

制作HTML5的表格

这个表格一点都不好看,因为没有表格线。

3、给<table>元素设置border属性的值,为表格加上表格线。

对HTML文档进行修改,设置<table>元素的border值为1,修改后的HTML文档为:

<!DOCTYPE html><html><head><title>table002</title><meta charset="utf-8" /></head><body><table border="1"><tr><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>

使用浏览器打开这个文档,效果如下:

制作HTML5的表格

现在的表格好看一些了,但是还有个缺点,就是没有标题。

4、添加<caption>元素,为表格添加标题

这里修改HTML文档,加上“华南师大附中初二(12)班课程表”标题,修改后的HTML文档如下:

<!DOCTYPE html><html><head><title>table003</title><meta charset="utf-8" /></head><body><table border="1"><caption>华南师大附中初二(12)班课程表</caption><tr><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>

使用浏览器打开这个文档,效果如下:

制作HTML5的表格

5、现在我们加上“上午、下午”的信息。

为加上“上午、下午”的信息,我们需要增加一列,并使用<td>元素的rowspan属性对行进行合并。修改后的HTML文档如下:

<!DOCTYPE html><html><head><title>table004</title><meta charset="utf-8" /></head><body><table border="1"><caption>华南师大附中初二(12)班课程表</caption><tr><th>上午/下午</th><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="4">上午</td><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td rowspan="3">下午</td><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>

使用浏览器打开该HTML文件,效果如下:

制作HTML5的表格

6、为了让课表更美观,我们将“上午/下午”和节次合并,将“社团活动”合并。

我们通过设置<td>元素的colspan属性,实现这个目标。修改后的HTML文档如下:

<!DOCTYPE html><html><head><title>table005</title><meta charset="utf-8" /></head><body><table border="1"><caption>华南师大附中初二(12)班课程表</caption><tr><th colspan="2">节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="4">上午</td><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td rowspan="3">下午</td><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td colspan="5">社团活动</td></tr></table></body></html>

使用浏览器打开该文件,效果如下:

制作HTML5的表格

7、现在表格内容基本上完整了,就是显得有点小。

修改一下HTML文档,添加一下列宽的信息,修改后的HTML文档如下:

<!DOCTYPE html><html><head><title>table006</title><meta charset="utf-8" /></head><body><table border="1" style="width:800px;text-align:center"><caption>华南师大附中初二(12)班课程表</caption><tr><th colspan="2">节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="4">上午</td><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td rowspan="3">下午</td><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td colspan="5">社团活动</td></tr></table></body></html>

使用浏览器打开这个文件,效果如下:

制作HTML5的表格

其实,在HTML5中,除了上面五个主要元素,还有三个较常用的的元素:

tbody元素:定义表格主体;

thead元素:定义表格头;

tfoot元素:定义表格脚。

这三个元素主要用于将表格分为表头、表尾、表体三个部分,便于进行编程控制,使用起来非常简单,这里就不介绍了。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 8月 13日 上午10:38
下一篇 2023年 8月 13日 上午10:56

相关推荐

  • 手机连接电脑无显示怎么办,手机连接电脑为什么不显示连接

    小编最新刚刚把自己的华硕笔记本重新安装WIN10专业版,然后准备把自己的魅族E3手机用USB线连接笔记本时,发现插在笔记本上的手机,在我的电脑里没有显示出来,找不到盘符或移动盘的标…

    2023年 6月 23日
  • 电脑连不上wifi是什么原因 怎么解决

    大家好,这期继续教大家排除网络小故障,那就是电脑连不上网手机可以连接上wifi,这是什么原因呢? 遇到这种情况,那是最简单的网络故障了,而且问题相当明确! 这种情况我们只要简单地推…

    2023年 2月 1日
  • 打电销不封号的技巧(解决电销封号难题)

    原标题:电销“猫腻”:智能外呼系统号称一天可打千次电话并能防封号 “恭喜放款50万,客户跟都跟不过来。”自称是电销智能外呼服务商的肖博(化名)更新了朋友圈,并配上一张客户成功放贷的…

    互联网 2023年 1月 7日
  • 如何把微信好友找回来,误删微信好友怎么找回

    最近很多的小伙伴们都在私信小编,说是微信好友删除了怎么加回来,小编一直挺忙,没有仔细地去实践过,微信已经删除的好友怎么找回来成为了许多小伙伴们的难题,许多小伙伴们一不注意就将微信好…

    2023年 7月 8日
  • 支付宝被盗刷怎么办?不用慌

    相信各位消息灵通的朋友们应该都知道了,不久前支付宝绑定的 App Store 被盗刷的事情。并且还引起了央视的关注~ 全国很多地方的苹果用户都中了招,少则几百块,多则上万块,涉及范…

    2022年 12月 17日
  • 美团外卖的满减活动怎么操作(美团开店宝怎么促销打折)

    商家做线上外卖平台所用的手段有很多,但是其中最重要也是需要精细化的一个手段叫满减活动。因为如果操作得当,它能使你当前的单量与利润翻一翻,当然反之,那就不止是失去单量跟利润的问题了。…

    2023年 9月 18日
  • qq碎片是什么

    不管对方是谁,我都不想让他(她)看到我软弱无助或内心深处最黑暗的一面。我也总是尽量表现出自己好的一面并隐藏黑暗的部分。在一段感情中,我也会对小魔王无理取闹,怀有各种猜忌怀疑,这些我…

    2023年 1月 21日
  • 支付宝刷脸赚赏金活动规则

    12月1日以来,支付宝刷脸设备活动在如火如荼地开展,除了消费者熟悉的刷脸立减金外,商户的赏金是如何获取的呢?作为一个商户或者收银员,从抢占支付宝刷脸设备开始,到赚取到赏金需要以下几…

    2023年 1月 31日
  • m7675dxf传真接收使用方法

    本文章提供的技术方案或与您产品的实际情况有所差异,您需在完整阅读方案并知晓其提示风险的情况下谨慎操作,避免造成任何损失。 故障现象: M7655DHFM7655DNFM7675DX…

    2023年 6月 1日
  • 山西邮政储蓄余额突破2000亿元大关是真的吗

    本报太原1月18日讯(记者张剑雯)记者今日从省邮政公司获悉,近日山西邮政储蓄余额突破2000亿元大关,山西邮政金融发展又迈上了一个新台阶。 近年来,省邮政公司以“三个视角”找差距、…

    互联网 2023年 2月 24日