表格用来展示结构化数据 ：成绩单、商品清单、课程表、报价单。 表格由：表格
<table>、行<tr>、单元格<td>、表头<th>组合而成。
基础标签总览
| 标签 | 全称 | 作用 |
|---|---|---|
<table> |
table | 整个表格的容器，包裹全部表格代码 |
<tr> |
table‑row | 表格一行，一行写一组 tr |
<td> |
table‑data | 普通单元格，存放数据文字 |
<th> |
table‑header | 表头单元格，默认文字加粗、居中，用于标题列 / 标题行 |
嵌套层级严格顺序：
<table>→ 里面放多个<tr>（行）<tr>→ 里面放多个<td>/<th>（单元格）
❗不要把 td 直接写在 table 里面，td 必须包裹在 tr 里面。
最简单基础表格示例（2 行 3 列）
html
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>基础表格</title>
</head>
<body>
<h3>学生成绩表</h3>
<table>
<!-- 第一行 tr -->
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<!-- 第二行 tr -->
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
</tr>
</table>
</body>
</html>解释：
<table>：整个表格外壳。- 第一个
<tr>代表第一行，里面 3 个<th>表头单元格。 - 第二个
<tr>代表第二行，里面 3 个<td>普通单元格放数据。 - 默认浏览器表格没有边框，看不到格子线。
给表格加边框属性 border
border="1" 给表格加上边框线（html 原生属性，简单测试用；正式项目边框推荐 CSS）
html
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
</tr>
<tr>
<td>小红</td>
<td>88</td>
</tr>
</table>⚠原生 border 会出现双线边框，后面用 CSS 可以合并边框。
单元格合并：跨列 colspan、跨行 rowspan（表格重点难点）
colspan="n"：跨列合并，横向占 n 个单元格宽度rowspan="n"：跨行合并，纵向占 n 个单元格高度
合并之后，被合并掉的单元格标签要删掉，不然会多出多余格子。
示例 1：colspan 跨列合并（横向合并）
第一行第一个单元格跨 2 列。
html
<table border="1">
<tr>
<!-- colspan="2" 横向占2格，后面删掉一个td -->
<td colspan="2">课程信息</td>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
</table>解释： <td colspan="2">课程信息</td>，这个单元格横向占据 2 格，所以本行不再写第二个<td>。
示例 2：rowspan 跨行合并（纵向合并）
html
<table border="1">
<tr>
<!-- rowspan="2" 纵向占2行，下面一行要删掉对应的td -->
<td rowspan="2">学生</td>
<td>语文</td>
</tr>
<tr>
<!-- 这里原本第一个td被上面rowspan合并，直接不写 -->
<td>数学</td>
</tr>
</table>综合合并例子：课程表
html
<table border="1">
<tr>
<th rowspan="2">时间</th>
<th colspan="3">星期</th>
</tr>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
</tr>
<tr>
<td>上午</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
</tr>
</table>表格补充标签 <thead>、<tbody>、<tfoot>
把表格语义化划分三部分：
<thead>：表头区域<tbody>：表格主体数据（主要内容）<tfoot>：表格底部汇总
写在 table 内部，包裹 tr，不会改变外观，提高代码可读性，方便 JS 操作表格。
示例：
html
<table border="1">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>键盘</td>
<td>120</td>
</tr>
<tr>
<td>鼠标</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>180</td>
</tr>
</tfoot>
</table>CSS 美化表格（实际开发用 CSS，不依赖 html 属性）
原生 table 的 border 不好看，双线边框，用 CSS 合并边框、设置宽高、背景色。 重点样式：
border-collapse: collapse;合并表格双线边框，变成单线width设置表格总宽度text‑align单元格文字对齐
完整美化示例：
html
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<style>
table {
width:450px;
border‑collapse: collapse; /*合并边框，消除双线*/
}
th,td {
border:1px solid #333; /*单元格边框*/
padding:8px; /*单元格内边距，文字离边框留点空隙*/
text‑align:center; /*文字居中*/
}
th {
background‑color:#eee; /*表头灰色背景*/
}
</style>
</head>
<body>
<h3>商品清单</h3>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>显示器</td>
<td>899</td>
<td>1</td>
</tr>
<tr>
<td>耳机</td>
<td>199</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>解释：
border‑collapse: collapse;最关键，把表格的双线边框合并成一条。padding:8px;单元格内部留白，文字不会贴在边框上。th,td同时选中表头和普通单元格，统一设置边框、对齐。
新手高频错误
错误 1：层级写乱，td 直接放在 table 里面
❌
html
<table>
<td>内容</td>
</table>✅ td 必须包在 tr：table > tr > td
错误 2：单元格合并之后，没有删除被合并的 td
合并单元格，那些被占掉位置的 td 标签一定要删掉，否则多出多余格子。
错误 3：只写 border，不写 CSS 的border‑collapse，出现难看双线格子。
测试可以用 html 的 border 属性；正式项目全部交给 CSS 处理。
错误 4：一行里面单元格数量参差不齐，表格错乱。
正常表格每一行单元格数量要一致，除非做了 colspan/rowspan 合并。
错误 5：把<h1> <p>直接写 table 里面，所有内容要放到 td 单元格内部。
完整综合练习代码，直接复制运行
html
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>表格综合练习</title>
<style>
table{
width:500px;
border‑collapse:collapse;
}
th,td{
border:1px solid #444;
padding:10px;
text‑align:center;
}
th{
background‑color:#cce5ff;
}
</style>
</head>
<body>
<h2>班级成绩单</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>92</td>
<td>88</td>
<td rowspan="2">优秀学生</td>
</tr>
<tr>
<td>小红</td>
<td>95</td>
<td>94</td>
<!-- 本单元格被上面rowspan合并，不写td -->
</tr>
<tr>
<td>小刚</td>
<td>76</td>
<td>80</td>
<td>普通</td>
</tr>
</tbody>
</table>
</body>
</html>本篇知识点总结
- 表格标签关系：
<table>表格容器 →<tr>行 →<td>普通单元格 /<th>表头单元格（默认加粗居中）。 border="1"原生测试边框；正式开发用 CSS，border‑collapse:collapse合并双线边框。- 单元格合并：
colspan="n"：跨列，横向合并rowspan="n"：跨行，纵向合并 ⚠合并后要删除被占用的单元格标签。
- 语义标签：
<thead>表头，<tbody>主体，<tfoot>表尾，只优化代码语义，不改外观。 - CSS：
padding设置单元格内边距，text‑align:center文字居中。 - 表格所有文字、内容必须写在
<td>或<th>单元格里面。
✍小练习：写一个 3 行 4 列表格，表头姓名、科目 1、科目 2、总分；CSS 美化单线边框；尝试一个单元格做 colspan 跨两列。