HTML创建表格

创建表格

HTML创建表格_第1张图片

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

HTML创建表格_第2张图片

创建表格的四个元素:

table、tbody、tr、th、td

1、

:整个表格以标记开始、
标记结束。

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

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

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

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

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

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

HTML创建表格_第3张图片

总结:

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

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

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

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

  

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

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

HTML创建表格_第4张图片

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

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

HTML创建表格_第5张图片

摘要

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

语法:

标题

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

语法:

标题文本

你可能感兴趣的:(HTML创建表格)