鲁达 成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。
一般我们看到的表格，会说它有几行几列。
而在HTML中的表格，并不是简单的说几行几列，是一行中给它设置多少个单元格。因为HTML中，不同的行，可能会有不同数量的单元格。
在HTML中，要做一个 表格，需要用表格标签来实现。
<table>、<tr>、<td>标签
<table>、<tr>、<td>就是表格标签。
table就是表格的意思。
tr就是table row的首字母简写，就是表格行的意思。
td就是table data的首字母简写，就是表格数据的意思。
所以，
table就是表示整个表格的标签。
tr表示表格的一个行，你的这个表格中有多少行，就需要你代码中写多少个tr标签对儿。
td就是单元格。表格的某一行中，有几个单元格，就要写多少个td标签对儿。
td标签对儿之间的内容，就是单元格的数据。
tr标签对儿写在table标签对儿里面，td标签对儿写在tr标签对儿里面。
比如一个三行四列的表格，就是1个table标签对儿，里面3个tr标签对儿，每一个tr标签对儿里面是4个td标签对儿。如下：
注意：为了规范，<table>标签中不要直接写td，而是先写tr，tr里再写td。
<table>的border属性
用表格标签实现的HTML表格，默认是没有边框线的。
<table>标签有个border属性，这个border属性就是设置表格的边框线的。为了显示出表格的边框，就需要把<table>标签的border属性给一个数字值，这个数字表示边框的宽度，单位是像素。
如果你的<table>标签上没有写border属性值，你的表格在网页上显示出来，是没有边框线的。
比如把border的值设为1，就表示这个表格的的边框的宽度是1像素。
接下来我在vscode和浏览器中演示一下。
如果没有设置<table>标签的border属性值：
<table> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </table>在浏览器中显示效果如下：
我们看到是没有边框线的。
只有给<table>标签加上border属性之后，才会有边框线。
<table border="1"> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </table>浏览器中效果：
我们看到是默认是双线边框，这是HTML的特性。
为了将双线边框变为单线边框，就需要用css来实现。
下面是让表格边框从双线变为单线的css代码：
<style> table,tr,td{ border-collapse: collapse; } </style>这一段css代码写到<head>标签里面，表格就会实现单边框线的效果。
不过现在我们还是在学习HTML的阶段，css先不用管它，等学到了，自然就知道了。
<caption>标签
<caption>就是表格的标题，如果你要给你的表格一个标题，就把<caption>作为<table>标签的第一个子元素。
也就是说，<caption>要写在所有<tr>标签的前面。
如果你要给表格设置宽度，就可以在<table>标签上写上width属性，给你一个你想要的宽度数值。比如我把表格的宽度设为500像素：
<table border="1" width="500"> <caption>俺是一个表哥</caption> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </table>浏览器中效果如下：
<th>标签
<th>标签和<td>标签是同一个级别。<td>是普通的单元格，而<th>也是单元格，但是它相当于是一个表示标题的单元格。
不是说<caption>是标题吗？
没错啊！<caption>是表示整个表格的标题。
而<th>相当于一列单元格的标题。
注意：既然<th>也是单元格，那么它就要写在<tr>当中。通常把<th>所在的<tr>放在所有其他<tr>的前面。
<th>里面的文字，显示出来默认是加粗的，而是是居中显示的。
现在我把<th>加上：
<table border="1" width="500"> <caption>俺是一个大表哥</caption> <tr> <th>俺是小标题</th> <th>俺是小标题</th> <th>俺是小标题</th> <th>俺是小标题</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </table>在浏览器中效果如下：
注意：也有一些人，这样写：
<th> <td>小标题</td> <td>小标题</td> <td>小标题</td> <td>小标题</td> </th>这种写法也可以用，但是实际上是没有真正理解<th>。
一定要记住，<th>和<td>是同一个级别，上面这样写，就让<th>和<tr>成同一个级别了。
最关键的时，这样写容易引起效果的错乱，有时候错乱了，你还得想办法搞正常，这就是理解不到位，写法不规范给自己找的不必要的麻烦。
本次表格标签的介绍，全部代码贴上：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格标签</title> <style> table,tr,td{ border-collapse: collapse; } </style> </head> <body> <table border="1" width="500"> <caption>俺是一个大表哥</caption> <tr> <th>俺是小标题</th> <th>俺是小标题</th> <th>俺是小标题</th> <th>俺是小标题</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </table> </body> </html>感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！