主题
列表与表格标签（Day3 2/4）
本页对应 Day03-HTML，共 6 段视频，约 1 小时 16 分。
学习目标
- 能够按照规范结构编写表格，正确使用
table、caption、thead、tbody、tfoot、tr、th、td，并说明各标签的嵌套关系与使用场景。 - 能够使用表格整体样式属性设置宽度、边框、单元格间距和单元格内边距，并解释表格高度通常由内容撑开的原因。
- 能够为
th、td设置宽高，说明设置单元格宽度相当于设置列宽、设置单元格高度相当于设置行高，并能区分给tr与给单元格设置高度的差异。 - 能够使用水平对齐和垂直对齐属性控制单元格内容位置，并说明在
thead、tbody、tfoot、tr、th、td上设置时的生效范围与就近覆盖规则。 - 能够使用
rowspan和colspan实现单元格跨行、跨列，并在后续行中正确空出被跨占的单元格位置。 - 能够独立完成课程表案例，正确处理多行表头、上午/下午跨列、星期/课程跨行，并保证表格结构完整且显示正确。
知识点
本节回顾清单（代码保留）
text
1. 排版标签
h1~h6
p
hr
br
pre
div
2. 文本标签
em
strong
ins
del
sup
sub
span
3. 图片标签
img 属性 src、alt、width、height
4. 相对路径和绝对路径
绝对路径： 网络绝对路径 、 计算机本地绝对路径
相对路径： ./ ../
5. 超链接和锚点
a 标签， 属性: href、target本节笔记未附图片，因此没有图片需要保留；下面按清单逐项回顾。转写稿里用表格案例反复强调“结构要严格、浏览器容错不等于规范”，这个调试思路同样适用于本节：标签要成对、嵌套要合法，不能靠浏览器“给面子”自动补结构。
排版标签：先搭页面骨架
为什么需要：页面先要有层次，标题、段落、换行、分割线、预格式化文本和通用容器各司其职，浏览器和搜索引擎才能理解内容结构。怎么想：先判断内容是“标题、段落、换行、分隔、保留格式、普通区块”中的哪一类，再选语义标签，不要一上来全用 div。怎么做：h1~h6 表示标题层级，p 表示段落，hr 表示主题分隔，br 表示行内换行，pre 表示保留空白和换行，div 表示块级容器。易错点：h1 不要滥用多个；br 不是段落分隔；pre 内代码缩进会原样显示；div 只负责布局容器，不承担语义。转写稿中“结构非常严格”的提醒在这里同样成立：块级标签不要随意塞进行内标签里。
文本标签：表达语义而不是只看样式
为什么需要：em、strong、ins、del、sup、sub、span 能让文字带上强调、插入、删除、上下标或局部包裹的语义。怎么想：先问“这句话为什么特殊”——是强调、修订、删除、数学上下标，还是只想局部加样式？怎么做：em 表示强调，strong 表示重要，ins 表示插入内容，del 表示删除内容，sup/sub 表示上标下标，span 表示行内容器。易错点：不要用 em/strong 代替纯样式；ins/del 要和普通文字区分语义；span 本身没有语义，别把它当万能的 div；上下标不要用来排版普通文字。调试时先看标签是否闭合，再看嵌套是否符合行内/块级规则。
图片标签：src 是必填，alt 不能省
为什么需要：页面需要展示图片，同时要兼顾加载失败、无障碍阅读和尺寸控制。怎么想：先确定图片地址 src，再写替代文本 alt，最后按需要设置 width、height。怎么做：img 是单标签，src 写图片路径，alt 写图片内容说明，width/height 控制显示尺寸。易错点：src 写错最常见，先检查路径；alt 不能空着糊弄；同时写死宽高可能拉伸图片，最好保持比例；图片是行内元素，别当块级容器乱包。转写稿里讲表格时反复说“能省不代表该省”，图片的 alt 也是一样：省掉看似能显示，但语义和容错都丢了。
相对路径和绝对路径：先定位，再写地址
为什么需要：图片、链接、样式文件都要靠路径找到资源，路径错一点页面就空白或 404。怎么想：先看目标文件相对当前 HTML 文件在哪里，再决定用相对还是绝对。怎么做：绝对路径包括网络绝对路径和计算机本地绝对路径；相对路径用 ./ 表示当前目录，../ 表示上一级目录。易错点：./ 不是可有可无的装饰；../ 层数别数错；本地绝对路径换电脑可能失效；网络绝对路径要写完整协议和域名。调试时先看浏览器控制台或网络面板的 404 地址，再倒推路径。
超链接和锚点：href 决定去哪，target 决定怎么开
为什么需要：超链接让页面之间、页面内部可以跳转，锚点让长页面能快速定位。怎么想：先确定是“跳到别的地址”还是“跳到本页某个位置”；前者写 href，后者用 id 配合 #id。怎么做：a 标签用 href 写目标地址，target 控制打开方式，常用 _self、_blank；锚点先给目标元素写唯一 id，再写 href="#id"。易错点：href 不要空着当按钮；_blank 要注意安全与体验；锚点 id 不能重复；# 后名字要和 id 完全一致。转写稿里出现的“标格、替害的、提胞、梯负、包der、rose by、cosplay”等是表格内容的同音误写，正确应理解为表格、thead、tbody、tfoot、border、rowspan、colspan；本节先记住：标签名和属性名必须按规范拼写，不能按读音写。
本节说明与表格结构：先搭骨架再填内容
本节笔记标题写作“2 列表”，但转写稿实际围绕 HTML 表格展开，下面按表格知识整理；转写稿未提供图片，以下保留关键代码。
为什么需要：表格要表达“行、列、表头、内容、总结”的关系，不能只堆 div。怎么想：先分清四部分——caption 标题、thead 表头、tbody 表体、tfoot 表脚；行用 tr，单元格用 th/td。怎么做：表头行放 thead，内容行放 tbody，总结行放 tfoot；tr 里只能放 td/th，thead/tbody/tfoot 里放 tr。易错点：省略 thead/tbody 时浏览器会自动补 tbody，但不会智能判断哪行是表头；跨行跨列时更不能随意跨 thead 与 tbody 的边界。
html
<table border="1" width="600" cellspacing="0" cellpadding="10">
<caption>用户信息表</caption>
<thead>
<tr><th>分类</th><th>序号</th><th>姓名</th><th>性别</th><th>电话</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td rowspan="4">普通用户</td><td>1</td><td>曹操</td><td>男</td><td>1001</td><td>上海市松江区</td></tr>
<tr><td>2</td><td>曹丕</td><td>男</td><td>1002</td><td>上海市松江区</td></tr>
<!-- 后续普通用户行少写第一个 td，把位置留给 rowspan -->
</tbody>
<tfoot>
<tr><td colspan="6">共计7条数据</td></tr>
</tfoot>
</table>表格整体样式：先能看，再好看
为什么需要：默认表格没有边框，单元格挤在一起。怎么想：整体样式优先设在 table 上；宽度可固定，高度尽量由内容撑开，因为数据可能是后端动态生成的。怎么做：用 border="1" 显示边框，cellspacing="0" 去掉单元格间距，cellpadding="10" 增加单元格内边距，width 控制表格宽度。易错点：这些属性在新标准中不推荐，后续应用 CSS 替代；当前先用它们理解规则，学了 CSS 并不白学。
html
<table border="1" width="600" cellspacing="0" cellpadding="10">调试时把 cellspacing 改成 20，会看到单元格缝隙变大；改成 0 才像常见表格。cellpadding 则像白纸四周留白，让文字不贴边框。
单元格宽高：宽是列宽，高要分清对象
为什么需要：整体宽度不够时，需要控制某一列；某些单元格需要更高。怎么想：给 td/th 设 width，实际影响同一列；给 td/th 设 height，实际影响同一行。怎么做：一般只给第一行单元格设宽度，后续同列自动对齐；高度少设死值。易错点：给 td/th 设高度，实际行高会在设定值基础上加上上下 cellpadding；给 tr 设高度则是总行高。转写中曹操单元格设 height="80" 且 cellpadding="10"，实际约 100；刘备行给 tr 设 80，就是 80。tr 不能设宽度，thead/tbody/tfoot 也不能设宽度，它们必须与表格同宽。
内容对齐：属性可继承，就近覆盖
为什么需要：th 默认居中，td 默认靠左，实际排版常要统一调整。怎么想：水平用 align="left|right|center"，垂直用 valign="top|bottom|middle"；可设在 thead/tbody/tfoot/tr/td/th 上。怎么做：给 tbody 设 align="right"，其中单元格都靠右；再给某个 td 设 align="center"，它按最近的设置生效。易错点：table 上的 align 是让整个表格靠边，不是单元格内容对齐；垂直居中值是 middle，不是 center。要观察纵向效果，需先给表格较大高度，否则内容被撑满看不出差别。
跨行跨列：只写一个单元格，后续行要留位
为什么需要：像“普通用户”要纵向合并多行，“上午/下午”要横向合并多列。怎么想：跨行用 rowspan，跨列用 colspan；只在一个单元格上写属性，被跨掉的位置在后续行中少写对应单元格。怎么做：普通用户跨4行，就在普通用户第一行写 rowspan="4"，后面三行各少写第一个 td；VIP用户跨3行同理。易错点：后续行若仍写满单元格，表格会“顶出来”；跨列数要按该行实际占位算，不能只看当前行写了几个。跨行跨列必须处在同一 thead 或同一 tbody 内，不能一个在 thead、一个在 tbody。
课程表案例：先写完整，再加跨行跨列
为什么需要：课程表同时有表头两行、上午下午跨列、星期/课程跨行。怎么想：前两行都放 thead，因为“星期/课程”要跨这两行；若第二行放 tbody，跨行会失败。怎么做：第一行写三个单元格：th rowspan="2"、th colspan="4"、th colspan="4"；第二行写8个 th；表体每行 th 加8个 td。易错点：先别急着加跨行跨列，先按完整结构写出来，再看哪一行少写、哪个单元格跨几行几列。调试“跑偏”时，优先检查跨行后后续行是否多写单元格。
html
<table border="1" width="900" cellspacing="0" cellpadding="10">
<caption>课程表</caption>
<thead>
<tr>
<th rowspan="2">星期/课程</th>
<th colspan="4">上午</th>
<th colspan="4">下午</th>
</tr>
<tr>
<th>第一节</th><th>第二节</th><th>第三节</th><th>第四节</th>
<th>第五节</th><th>第六节</th><th>第七节</th><th>第八节</th>
</tr>
</thead>
<tbody>
<tr><th>星期一</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<!-- 星期二至星期日同理：th + 8 个 td -->
</tbody>
</table>一、先认识表格的结构：table 里分四部分
为什么需要：做用户信息表时，如果直接把内容堆在页面里，列和列对不齐，也说不清哪一行是表头。表格标签的价值，是让“标题、表头、数据行、总结行”各归其位。
怎么想：一个规范表格的最外层是 table，里面通常分四部分：表格标题 caption、表格头 thead、表格体 tbody、表格角 tfoot。行用 tr，单元格用 td，表头单元格用 th。转写稿里反复强调：行要写在 thead、tbody、tfoot 里，td/th 要写在 tr 里。
怎么做：
html
<table border="1">
<caption>用户信息表</caption>
<thead>
<tr>
<th>序号</th><th>姓名</th><th>性别</th><th>电话</th><th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>曹操</td><td>男</td><td>10086</td><td>上海市松江区</td>
</tr>
</tbody>
</table>易错点：不要以为 caption 和 h1、title 是一回事，caption 只表示表格标题；th 默认加粗、居中，td 默认靠左，但都可以调整。转写稿还演示了：不写 thead/tbody 时浏览器可能自动补 tbody，但它不会智能判断第一行是不是表头，所以建议自己写清楚。
二、整体样式：先让它“像表格”
为什么需要：只写结构时，页面里只是排列整齐的文字，看不到格子。转写稿里运行后说“这也不像个表格”，原因就是没有边框和间距控制。
怎么想：先给 table 加整体属性：border 边框、width 宽度、cellspacing 单元格间距、cellpadding 单元格内补白。高度一般不要写死，让内容把表格撑开，因为真实数据可能是后端动态生成的。
怎么做：
html
<table border="1" width="600" cellspacing="0" cellpadding="10">
<caption>用户信息表</caption>
<!-- thead、tbody 同上 -->
</table>易错点：border="1" 只给表格和单元格加细边框；把值改大主要影响外框，不会让内部格子等比例变粗。cellspacing="0" 后格子之间不再有缝隙，更像表格；cellpadding 是文字与边框的距离，不是单元格之间的距离。border、cellspacing 等在新标准里不建议使用，但当前还没学 CSS，先用它们理解规则，后面 CSS 会继续用。
三、单元格宽高：设宽其实是设列宽
为什么需要：默认列宽由内容撑开，地址字多就宽，序号字少就窄。实际表格常需要控制某一列宽度。
怎么想：给 td 或 th 设置 width，同一列都会按这个宽度对齐；给 tr 设置宽度没有意义，因为行必须和表格同宽。高度方面，tr 和单元格都能设 height，但含义有差别。
怎么做：
html
<tr>
<td width="50">1</td>
<td width="150">曹操</td>
</tr>易错点：给某个单元格设宽，不是只管它自己，而是影响整列。给 td 设 height 时，实际行高还会加上上下 cellpadding；给 tr 设高度则更接近整行总高度。转写稿用曹操和刘备对比演示过这个现象：看起来都是 80，实际高度可能不同。开发中遇到“高度和预期不一样”，要想到内补白。
四、内容对齐：align 管横向，valign 管纵向
为什么需要：th 默认居中，td 默认靠左；数据多时还要让内容靠上、靠下或垂直居中。
怎么想：横向用 align，值有 left/right/center；纵向用 valign，值有 top/bottom/middle。可以给 thead/tbody/tfoot、tr、td/th 设置，作用范围是“它包裹的单元格”；离得近的设置优先。
怎么做：
html
<tr align="center" valign="middle">
<td>1</td><td>曹操</td>
</tr>易错点：纵向居中不是 center，而是 middle。给 table 设 align 是让整个表格靠左/右，不是让单元格文字对齐，别混。纵向效果要明显，表格需要有足够高度；否则内容被上下边框挤着，看不出 valign 的差别。
五、跨行跨列：一个单元格顶几个位置
为什么需要：像“普通用户”“VIP用户”“共计7条数据”这种单元格，需要横跨多行或多列。HTML 不叫“合并单元格”，而叫跨行、跨列。
怎么想：跨行用 rowspan，跨列用 colspan。跨行时，这个单元格写在所跨几行的第一行里；后面被它占位的行要少写对应单元格。跨列时，数清楚它要顶几个单元格位置。
怎么做：
html
<tr>
<td rowspan="4">普通用户</td>
<td>1</td><td>曹操</td><td>男</td><td>10086</td><td>上海市松江区</td>
</tr>
<tr>
<td>2</td><td>曹丕</td><td>男</td><td>10010</td><td>上海市松江区</td>
</tr>易错点：跨行后下面行不“空着写一个”，而是少写那个单元格；如果多写，会把表格顶乱。转写稿做课程表时还发现：跨行的几行必须放在同一个结构里，不能一行在 thead、一行在 tbody，否则跨不过这个“隔阂”。课程表里“上午/下午”用 colspan 跨列，“星期/课程”用 rowspan 跨行，前两行都放在 thead 中，第二行再少写第一个单元格，表格才对齐。
课堂画面
代码示例
示例一：规范的表格结构（caption / thead / tbody / tfoot）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格结构</title>
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="10">
<!-- 表格标题：表格里的标题，和 title、h1~h6 不冲突 -->
<caption>用户信息表</caption>
<!-- 表格头：放表头行，用 th 说明每一列是什么 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>地址</th>
</tr>
</thead>
<!-- 表格体：放主要内容行，用 td -->
<tbody>
<tr>
<td>1</td>
<td>曹操</td>
<td>男</td>
<td>13800000001</td>
<td>上海市松江区</td>
</tr>
<tr>
<td>2</td>
<td>刘备</td>
<td>男</td>
<td>13800000002</td>
<td>上海市浦东新区</td>
</tr>
<tr>
<td>3</td>
<td>高晓乐</td>
<td>男</td>
<td>13800000003</td>
<td>上海市松江区</td>
</tr>
<tr>
<td>4</td>
<td>孙悟空</td>
<td>男</td>
<td>13800000004</td>
<td>上海市黄浦区</td>
</tr>
</tbody>
<!-- 表格角：放总结行 -->
<tfoot>
<tr>
<td colspan="5">共计 4 条数据</td>
</tr>
</tfoot>
</table>
</body>
</html>关键行与易错点
table是外层包裹元素（类似 ul/ol/dl），内部按caption → thead → tbody → tfoot四部分划分，行 tr 必须写在 thead / tbody / tfoot 里面。tr里只能写th或td，td/th只能写在tr里；thead/tbody/tfoot只能写在table里。这个结构非常严格，不能像 div 那样乱套。td/th内部最自由，可以再写 div、p，甚至再套一个 table。- 省略 thead / tbody / tfoot 浏览器会自动补上（在开发者工具里能看到自动加的 tbody），但浏览器不会智能判断哪一行是表头行，所以规范写法要自己写全。
border="1"给表格和单元格加 1 像素边框；cellspacing="0"去掉单元格之间的间距，cellpadding="10"设置单元格内边距（边框与内容之间的距离）。border、cellspacing、cellpadding、width这几个属性在 VS Code 里会变红——H5 新标准不推荐，后面用 CSS 代替，规则是一样的。- 表格一般只设宽度不设高度，高度让内容撑开，因为数据是后端动态生成的，写死高度会出问题。
示例二：单元格宽高与内容对齐
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>单元格宽高与对齐</title>
</head>
<body>
<table border="1" width="600" height="400" cellspacing="0" cellpadding="10">
<caption>用户信息表</caption>
<!-- 给 thead 设对齐：里面所有单元格都生效 -->
<thead align="center" valign="middle">
<tr>
<th width="60">序号</th>
<th width="100">姓名</th>
<th width="60">性别</th>
<th width="150">电话</th>
<th>地址</th>
</tr>
</thead>
<!-- 给 tbody 设对齐：里面所有单元格都生效 -->
<tbody align="right" valign="bottom">
<tr>
<td>1</td>
<td>曹操</td>
<!-- 单独给这个单元格设置，就近原则，覆盖上面的 -->
<td align="center" valign="middle">男</td>
<td>13800000001</td>
<td>上海市松江区</td>
</tr>
<!-- 给 tr 设置高度：这就是这一行的总行高 -->
<tr height="80">
<td>2</td>
<td>刘备</td>
<td>男</td>
<td>13800000002</td>
<td>上海市浦东新区</td>
</tr>
<tr>
<td>3</td>
<td>高晓乐</td>
<td>男</td>
<td>13800000003</td>
<td>上海市松江区</td>
</tr>
</tbody>
</table>
</body>
</html>关键行与易错点
- 给
td/th设width，实际是设列宽：同一列所有单元格都会按这个宽度对齐，所以一般只给第一行设置即可，后面的行不用重复写。 tr和thead/tbody/tfoot不能设宽度（必须和整个表格同宽），但tr可以设高度。- 给
td/th设height相当于设行高，但实际行高 = 设置的高度 + 上下 cellpadding（上面 80 会变成 100）；给tr设height则就是总行高。这是最容易踩的坑。 - 水平对齐
align，值只有left/right/center；纵向对齐valign，值是top/bottom/middle——纵向居中叫 middle，写成 center 无效。 - 这两个属性
thead/tbody/tfoot、tr、td/th都有，生效范围是"谁包裹的单元格"；就近原则：自己设了用自己的，没设才往上找。 table上也能写align，但那会让整个表格靠左/右/中，不是单元格内容对齐，别搞混。- 想看到纵向对齐效果，必须给表格一个明显的高度，否则内容被上下边框挤着，看不出 top/bottom/middle 的差别。
示例三：单元格跨行跨列（课程表）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<table border="1" width="900" cellspacing="0" cellpadding="10">
<caption>课程表</caption>
<!-- 两行表头都放在 thead 里，跨行才能跨得过去 -->
<thead>
<tr>
<!-- 跨行：一个顶两行 -->
<th rowspan="2">星期 / 课程</th>
<!-- 跨列：一个顶四列 -->
<th colspan="4">上午</th>
<th colspan="4">下午</th>
</tr>
<tr>
<!-- 第一列已被上面的 rowspan 占住，这一行只写 8 个 -->
<th>第一节课</th>
<th>第二节课</th>
<th>第三节课</th>
<th>第四节课</th>
<th>第五节课</th>
<th>第六节课</th>
<th>第七节课</th>
<th>第八节课</th>
</tr>
</thead>
<tbody>
<tr>
<th>星期一</th>
<td>语文</td><td>语文</td><td>数学</td><td>数学</td>
<td>英语</td><td>英语</td><td>物理</td><td>物理</td>
</tr>
<tr>
<th>星期二</th>
<td>数学</td><td>数学</td><td>语文</td><td>语文</td>
<td>化学</td><td>化学</td><td>英语</td><td>英语</td>
</tr>
<tr>
<th>星期三</th>
<td>英语</td><td>英语</td><td>物理</td><td>物理</td>
<td>语文</td><td>语文</td><td>数学</td><td>数学</td>
</tr>
<tr>
<th>星期四</th>
<td>物理</td><td>物理</td><td>化学</td><td>化学</td>
<td>数学</td><td>数学</td><td>语文</td><td>语文</td>
</tr>
<tr>
<th>星期五</th>
<td>化学</td><td>化学</td><td>英语</td><td>英语</td>
<td>物理</td><td>物理</td><td>数学</td><td>数学</td>
</tr>
<tr>
<th>星期六</th>
<td>语文</td><td>语文</td><td>数学</td><td>数学</td>
<td>英语</td><td>英语</td><td>化学</td><td>化学</td>
</tr>
<tr>
<th>星期日</th>
<td>数学</td><td>数学</td><td>物理</td><td>物理</td>
<td>语文</td><td>语文</td><td>英语</td><td>英语</td>
</tr>
</tbody>
</table>
</body>
</html>关键行与易错点
rowspan="n"跨行（纵向合并），colspan="n"跨列（横向合并），都写在td或th上。HTML 里不需要像 Excel 那样先写满再合并，直接写一个单元格，再告诉它跨几个。- 被跨掉的格子后面的行/列必须少写相应数量的单元格，否则整张表会被顶偏。课程表第二行只写 8 个
th，就是因为第一列已被上面的rowspan="2"占了。 - 跨行的单元格要写在它所跨的这几行中的第一行里。
- 跨行不能跨越 thead 与 tbody 的边界：课程表两行表头必须都放进
thead（或都放tbody），一行放 thead、一行放 tbody，rowspan就失效了。 - 跨列时按"被跨位置最多的一行"来数：tfoot 里的"共计 7 条数据"要
colspan="6"，因为上面那行虽然只写了 4 个单元格，但有两个是上面跨下来的位置，实际仍占 6 个位置。 - 表格里同一行可以混用
th和td（课程表第一列用th表示星期），th默认加粗居中，但语义和样式都不影响跨行跨列。 - 跨行跨列是这一节最需要动脑的部分，样式属性记混了改一改就行，但跨行跨列写错会导致整张表错位，建议写完对照表格一格一格数。
常见错误
- 表格能显示但结构不完整 → 省略
thead、tbody、tfoot，依赖浏览器自动补全，导致表头行无法按语义归位 → 显式补齐结构，表头行放thead，内容行放tbody，汇总行放tfoot。 tr中写入div、p等标签 → 误把tr当普通容器 →tr内只放td/th；需要复杂内容时放到td/th内部。- 设置跨行跨列后表格错位 → 被跨过的后续行仍写满单元格，没有给跨行单元格预留位置 → 后续对应行少写被跨占的单元格；跨列时按实际总列数计算
colspan。 - 跨行跨列失效或显示异常 → 被跨的几行分别写在
thead和tbody中，跨不过结构边界 → 需要互相跨行的行放在同一结构区域内。 - 给
tr设置width不生效 → 行宽必须与表格同宽，列宽由单元格决定 → 给同一列任意一行的td/th设置宽度，通常给第一行设置。 - 给单元格设高后实际高度比预期大 → 单元格高度会叠加
cellpadding的上下内边距；给tr设高则是总行高 → 明确调的是单元格还是行，按预期选择td/th或tr。 valign居中写了center不生效 → 纵向居中值应为middle，center用于横向align→ 横向用left/right/center，纵向用top/bottom/middle。- 表格高度固定后数据增多显示拥挤 → 把动态内容表格写死高度 → 通常只固定宽度，高度交给内容撑开。
练习
- 写一个“用户信息表”，包含
caption、thead、tbody，表头为序号、姓名、性别、电话、地址，并填入至少 3 条数据。 - 修改一个错位表格：其中“普通用户”跨 4 行、“VIP 用户”跨 3 行，要求后续行正确预留单元格位置。
- 制作“课程表”：前两行作为表头，包含“星期/课程”“上午”“下午”和节次，实现“上午”“下午”跨列、“星期/课程”跨行。
- 给一个普通表格分别设置表格宽度、单元格间距为 0、单元格内边距、边框，再调整某列宽度和某行高度。
- 用浏览器开发者工具查看一个省略
thead、tbody的表格，记录浏览器自动补出的结构，并改写成完整结构。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 表格的结构 | 17:58 |
| 2 | 表格整体样式设置 | 08:26 |
| 3 | 设置单元格宽高 | 10:43 |
| 4 | 设置单元格内容的对齐方式 | 12:06 |
| 5 | 单元格跨行跨列 | 16:10 |
| 6 | 表格案例课程表 | 10:51 |
小结
- 表格结构要完整，不要长期依赖浏览器自动补全。
tr内只能放td/th，但td/th内部可以放其他内容。- 列宽由单元格决定，行高可由
tr或单元格控制，但二者计算方式有差异。 - 对齐属性的作用范围取决于设置在
thead/tbody/tfoot、tr还是td/th上。 - 跨行跨列的关键不是“合并”，而是后续行要给被跨占的位置留空。
- 跨行跨列不能随意跨越
thead、tbody等结构边界。 - 表格通常固定宽度、不固定高度，以适应动态数据。
- 这些旧式表格属性虽不推荐在新标准中大量使用，但有助于理解后续 CSS 的设置规则。