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中
运行效果
进行单元格合并
代码
文章来源：https://www.toymoban.com/news/detail-830060.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">
<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>
最终运行效果
文章来源地址https://www.toymoban.com/news/detail-830060.html
到了这里，关于html的表格标签的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
