成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

一般我们看到的表格，会说它有几行几列。

而在HTML中的表格，并不是简单的说几行几列，是一行中给它设置多少个单元格。因为HTML中，不同的行，可能会有不同数量的单元格。

在HTML中，要做一个 表格，需要用表格标签来实现。

、、标签、、就是表格标签。

table就是表格的意思。

tr就是table row的首字母简写，就是表格行的意思。

td就是table data的首字母简写，就是表格数据的意思。

所以，

table就是表示整个表格的标签。

tr表示表格的一个行，你的这个表格中有多少行，就需要你代码中写多少个tr标签对儿。

td就是单元格。表格的某一行中，有几个单元格，就要写多少个td标签对儿。

td标签对儿之间的内容，就是单元格的数据。

tr标签对儿写在table标签对儿里面，td标签对儿写在tr标签对儿里面。

比如一个三行四列的表格，就是1个table标签对儿，里面3个tr标签对儿，每一个tr标签对儿里面是4个td标签对儿。如下：

注意：为了规范，

标签中不要直接写td，而是先写tr，tr里再写td。的border属性

用表格标签实现的HTML表格，默认是没有边框线的。

标签有个border属性，这个border属性就是设置表格的边框线的。为了显示出表格的边框，就需要把标签的border属性给一个数字值，这个数字表示边框的宽度，单位是像素。

如果你的

标签上没有写border属性值，你的表格在网页上显示出来，是没有边框线的。

比如把border的值设为1，就表示这个表格的的边框的宽度是1像素。

接下来我在vscode和浏览器中演示一下。

如果没有设置

标签的border属性值：A B C D E F G H I J K L

在浏览器中显示效果如下：

我们看到是没有边框线的。

只有给

标签加上border属性之后，才会有边框线。

A B C D E F G H I J K L

浏览器中效果：

我们看到是默认是双线边框，这是HTML的特性。

为了将双线边框变为单线边框，就需要用css来实现。

下面是让表格边框从双线变为单线的css代码：

这一段css代码写到

标签里面，表格就会实现单边框线的效果。

不过现在我们还是在学习HTML的阶段，css先不用管它，等学到了，自然就知道了。

标签

就是表格的标题，如果你要给你的表格一个标题，就把作为标签的第一个子元素。

也就是说，

要写在所有标签的前面。

如果你要给表格设置宽度，就可以在

标签上写上width属性，给你一个你想要的宽度数值。比如我把表格的宽度设为500像素：俺是一个表哥 A B C D E F G H I J K L

浏览器中效果如下：

标签标签和标签是同一个级别。是普通的单元格，而也是单元格，但是它相当于是一个表示标题的单元格。

不是说

是标题吗？

没错啊！是表示整个表格的标题。

而相当于一列单元格的标题。

注意：既然也是单元格，那么它就要写在当中。通常把所在的放在所有其他的前面。里面的文字，显示出来默认是加粗的，而是是居中显示的。

现在我把

加上：俺是一个大表哥 俺是小标题 俺是小标题 俺是小标题 俺是小标题 A B C D E F G H I J K L

在浏览器中效果如下：

注意：也有一些人，这样写：

 小标题 小标题 小标题 小标题 

这种写法也可以用，但是实际上是没有真正理解

。

一定要记住，和是同一个级别，上面这样写，就让和成同一个级别了。

最关键的时，这样写容易引起效果的错乱，有时候错乱了，你还得想办法搞正常，这就是理解不到位，写法不规范给自己找的不必要的麻烦。

本次表格标签的介绍，全部代码贴上：

 表格标签

俺是一个大表哥 俺是小标题 俺是小标题 俺是小标题 俺是小标题 A B C D E F G H I J K L

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！