html的表格标签

2026/9/21 19:15:56 拓冰建站浏览量

previewfile_2509430104

html的表格标签

table标签:表示整个表格
tr:表示表格的一行
td:表示一个单元格
th:表示表头单元格.会居中加粗
thead:表格的头部区域 (注意和th区分,范围是比th要大的).
tbody:表格得到主体区域.

table包含tr , tr包含td或者th.

表格标签有一些属性，可以用于设置大小边框等，但是一般使用CSS方式来设置，这些属性都要放到 table标签中.

. align是表格相对于周围元素的对齐方式. align="center"(不是内部元素的对齐方式)
border表示动框。1表示有边框(数字越大,边框越粗)，""表示没边框.
cellpadding:内容距离边框的距离，默认1像素
cellspacing:单元格之间的距离，默认为2像素
width / height:设置尺寸.

注意,这几个属性, vscode都提示不出来.

样例如下

姓名	性别	年龄
张三	男	13
李四	男	14
王五	女	15

用html代码实现上述的表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300" cellspacing ="0" cellpadding = "80" align="center"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>13</td></tr><tr><td>李四</td><td>男</td><td>14</td></tr><tr><td>王五</td><td>女</td><td>15</td></tr></table>
</body>
</html>

代码在浏览器运行效果

thead里面的内容居中并且加粗展示

对表头进行代码改进

通常情况下，我们把表头相关的信息放在thead中，表格内容相关的信息放在tbody中

运行效果

进行单元格合并

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300" cellspacing ="0" cellpadding = "80" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2">男</td><td>13</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>14</td></tr><tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>15</td></tr></tbody></table>
</body>
</html>

建站实战干货