怎么用html创建表格,HTML创建表格

本文介绍了如何在网页中创建表格,包括table、tbody、tr、th、td等元素的使用,以及如何通过CSS为表格添加边框以提高可读性。还提到了caption标签用于添加表格标题和摘要,增强了表格的语义化,有助于搜索引擎理解和辅助技术的使用。
摘要由CSDN通过智能技术生成

创建表格

60c0e9e21f32

想在网页上展示上述表格效果可以使用以下代码:

60c0e9e21f32

创建表格的四个元素:

table、tbody、tr、th、td

1、

:整个表格以标记结束。

2、

…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。

3、

…:表格的一行,所以有几对tr表格就有几行。

4、

…:表格的一个单元格,一行中包含几对...,说明一行中就有几列。

5、

…:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为:

60c0e9e21f32

总结:

1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

2、表头,也就是th标签中的文本默认为粗体并且居中显示

用css样式,为表格加入边框

Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。

在右侧代码编辑器中添加如下代码:

table tr td,th{border:1px solid #000;}

上述代码是用 css 样式代码(后面章节会详细讲解),为th,td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式:

60c0e9e21f32

caption标签,为表格添加标题和摘要

表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下:

60c0e9e21f32

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:

标题

用以描述表格内容,标题的显示位置:表格上方。*

语法:

标题文本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值