Web表格知识点（思维导图精简版)
Web表格知识点（思维导图精简版）
一、HTML表格基础
1. 核心四标签
- table：表格整体容器
- tr：行
- td：普通单元格
- th：表头单元格（默认加粗居中）
2. 语义化结构（考试常考）
- thead：表头区域
- tbody：表格主体（可多个）
- tfoot：表格底部汇总
3. 合并单元格（重中之重）
- colspan：跨列合并（左右合并）
- rowspan：跨行合并（上下合并）
口诀：合并谁写谁，多余单元格必须删除
4. 辅助标签
- caption：表格标题
- colgroup / col：统一设置整列样式
二、废弃原生属性（了解即可）
- border、width、height
- cellpadding（内边距）
- cellspacing（单元格间距）
全部改用CSS实现
三、CSS表格核心样式（必会）
1. 边框处理
- border-collapse: collapse; // 合并边框（消除双层线）
- border-spacing: 0; // 单元格间距清零
2. 单元格样式
- text-align：水平对齐
- vertical-align：垂直对齐（middle居中最常用）
- padding：单元格内边距
3. 斑马条纹（隔行变色）
- tr:nth-child(odd) 奇数行
- tr:nth-child(even) 偶数行
4. 表格布局规则
- table-layout: auto：自适应内容（默认）
- table-layout: fixed：固定列宽、布局稳定、推荐
四、高级功能
1. 固定表头滚动表格
- tbody设为块级、设置高度、滚动溢出
- thead、tr保持表格布局，防止错位
2. div模拟表格
- display: table
- display: table-row
- display: table-cell
五、使用场景（考点判断）
✅ 适合 table
- 二维结构化数据：成绩表、账单、后台列表、日历
❌ 不适合 table
- 页面整体布局（已淘汰）
六、高频易错点（必背避坑）
1. 忘记 border-collapse 出现双边框
2. 合并单元格不删多余td导致错乱
3. 长文本撑开表格 → 加 table-layout: fixed
4. 垂直不居中 → td加vertical-align
5. 滚动表头错位 → 分开设置thead和tbody布局
代码如下
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 600px;
table-layout: fixed;
}
th,td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
vertical-align: middle;
}
thead tr {
background: #409eff;
color: white;
}
tbody tr:nth-child(even) {
background: #f0f7ff;
}
</style>
</head>
<body>
<table>
<caption>班级成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2">缺考</td>
</tr>
</tbody>
</table>
</body>
</html>
浙公网安备 33010602011771号