HTML 表格：<table>、<tr>、<td> 标签
表格是网页开发中最常用的元素之一，无论是展示数据、创建布局还是整理信息，HTML 表格都能派上用场。本文将系统讲解 HTML 表格的核心标签及其用法，帮助你从零基础到熟练掌握。
一、表格的基本结构
HTML 表格由三个核心标签组成，它们像嵌套的容器一样层层递进：
<table>：定义整个表格的外层容器<tr>：定义表格的行（table row）<td>：定义表格的单元格（table data）
这三者之间是包含关系：<table> 包含多个 <tr>，每个 <tr> 又包含多个 <td>。理解这个层级结构是掌握表格的关键。
二、创建第一个表格
步骤如下：
-
使用
<table>标签包裹整个表格内容<table> <!-- 表格内容放在这里 --> </table> -
使用
<tr>标签创建行每个
<tr>代表表格中的一行数据。第一行通常用作表头。<table> <tr></tr> <!-- 第一行 --> <tr></tr> <!-- 第二行 --> <tr></tr> <!-- 第三行 --> </table> -
使用
<td>标签在行内创建单元格每个
<td>代表行中的一个列单元格。<table> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </table>
三、表头标签 <th>
表头是表格的第一行，用于说明每列数据的含义。HTML 提供了专门的 <th> 标签来定义表头单元格。
<th> 与 <td> 的区别在于：<th> 默认以加粗、居中的样式显示内容，用于标识列标题。
修改表头行的代码示例：
<table>
<tr>
<th>姓名</th> <!-- 表头：加粗居中 -->
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
</table>四、表格边框
默认情况下，HTML 表格没有可见的边框。要让表格轮廓清晰，需要为 <table> 标签添加 border 属性。
| 属性值 | 效果描述 |
|---|---|
border="1" |
显示 1 像素宽的边框 |
border="2" |
显示 2 像素宽的边框 |
border="0" |
无边框 |
| 不设置 | 默认无边框 |
带边框的完整示例：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>五、单元格合并
当某些单元格需要跨越多列或多行时，可以使用合并属性。
5.1 列合并（colspan）
colspan 属性让一个单元格横跨多个列。
<table border="1">
<tr>
<th colspan="2">学生信息</th> <!-- 跨2列 -->
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>5.2 行合并（rowspan）
rowspan 属性让一个单元格纵跨多行。
<table border="1">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th rowspan="2">课程</th> <!-- 跨2行 -->
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
</table>六、常用属性汇总
以下表格列出了表格相关的常用属性及其作用：
| 属性 | 可用标签 | 作用描述 |
|---|---|---|
border |
<table> |
设置边框宽度 |
colspan |
<td>, <th> |
单元格横跨列数 |
rowspan |
<td>, <th> |
单元格纵跨行数 |
cellpadding |
<table> |
单元格内边距 |
cellspacing |
<table> |
单元格间距 |
align |
<table>, <tr>, <td> |
水平对齐方式 |
valign |
<tr>, <td> |
垂直对齐方式 |
width |
<table>, <td> |
设置宽度 |
height |
<tr>, <td> |
设置高度 |
七、综合示例：学生成绩表
以下是一个完整的学生成绩表，包含了表头、边框、单元格对齐等常用设置：
<table border="1" cellpadding="8" align="center">
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th colspan="2">成绩</th> <!-- 合并两列 -->
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>数学: 92</td>
<td>英语: 88</td>
</tr>
<tr align="center">
<td>002</td>
<td>李四</td>
<td>数学: 85</td>
<td>英语: 90</td>
</tr>
</table>八、语义化表格结构
HTML5 引入了更具语义化的表格结构标签，让代码结构更清晰：
| 标签 | 作用 |
|---|---|
<thead> |
包裹表头行组 |
<tbody> |
包裹主体内容行组 |
<tfoot> |
包裹表尾行组 |
<caption> |
表格标题 |
语义化示例：
<table border="1">
<caption>学生成绩统计表</caption> <!-- 表格标题 -->
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>92</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>88.5</td>
</tr>
</tfoot>
</table>九、样式美化技巧
通过 CSS 可以让表格更加美观。以下是常用的 CSS 样式：
/* 表格整体样式 */
table {
border-collapse: collapse; /* 合并相邻边框 */
width: 100%;
}
/* 表头样式 */
th {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
padding: 12px;
}
/* 单元格样式 */
td {
border: 1px solid #ddd; /* 灰色边框 */
padding: 10px;
}
/* 悬停效果 */
tr:hover {
background-color: #f5f5f5;
}十、完整实战案例
下面是一个功能完整的商品清单表格，包含了大多数实际开发中会用到的特性：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
th {
background-color: #2196F3;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<caption>商品价格清单</caption>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>笔记本电脑</td>
<td>¥5,999</td>
<td>1</td>
<td>¥5,999</td>
</tr>
<tr>
<td>无线鼠标</td>
<td>¥89</td>
<td>2</td>
<td>¥178</td>
</tr>
<tr>
<td>键盘</td>
<td>¥199</td>
<td>1</td>
<td>¥199</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><strong>总价</strong></td>
<td><strong>¥6,376</strong></td>
</tr>
</tfoot>
</table>
</body>
</html>核心要点速查
<table>是外层容器，每个表格必须有且仅有一个<tr>定义行，行内必须包含至少一个<td>或<th><td>是普通单元格，<th>是表头单元格（默认加粗居中）colspan横向合并，rowspan纵向合并border-collapse: collapseCSS 属性可合并双边框- 使用
<thead>、<tbody>、<tfoot>提升代码语义化
暂无评论，快来抢沙发吧！