表格用来展示结构化数据成绩单、商品清单、课程表、报价单。 表格由表格table、行tr、单元格td、表头th组合而成。基础标签总览标签全称作用tabletable整个表格的容器包裹全部表格代码trtable‑row表格一行一行写一组 trtdtable‑data普通单元格存放数据文字thtable‑header表头单元格默认文字加粗、居中用于标题列 / 标题行嵌套层级严格顺序table→ 里面放多个tr行tr→ 里面放多个td/th单元格❗不要把 td 直接写在 table 里面td 必须包裹在 tr 里面。最简单基础表格示例2 行 3 列!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 title基础表格/title /head body h3学生成绩表/h3 table !-- 第一行 tr -- tr th姓名/th th语文/th th数学/th /tr !-- 第二行 tr -- tr td小明/td td90/td td95/td /tr /table /body /html解释table整个表格外壳。第一个tr代表第一行里面 3 个th表头单元格。第二个tr代表第二行里面 3 个td普通单元格放数据。默认浏览器表格没有边框看不到格子线。给表格加边框属性borderborder1给表格加上边框线html 原生属性简单测试用正式项目边框推荐 CSStable border1 tr th姓名/th th语文/th /tr tr td小红/td td88/td /tr /table⚠原生 border 会出现双线边框后面用 CSS 可以合并边框。单元格合并跨列colspan、跨行rowspan表格重点难点colspann跨列合并横向占 n 个单元格宽度rowspann跨行合并纵向占 n 个单元格高度合并之后被合并掉的单元格标签要删掉不然会多出多余格子。示例 1colspan 跨列合并横向合并第一行第一个单元格跨 2 列。table border1 tr !-- colspan2 横向占2格后面删掉一个td -- td colspan2课程信息/td /tr tr tdHTML/td tdCSS/td /tr /table解释td colspan2课程信息/td这个单元格横向占据 2 格所以本行不再写第二个td。示例 2rowspan 跨行合并纵向合并table border1 tr !-- rowspan2 纵向占2行下面一行要删掉对应的td -- td rowspan2学生/td td语文/td /tr tr !-- 这里原本第一个td被上面rowspan合并直接不写 -- td数学/td /tr /table综合合并例子课程表table border1 tr th rowspan2时间/th th colspan3星期/th /tr tr th周一/th th周二/th th周三/th /tr tr td上午/td tdHTML/td tdCSS/td tdJS/td /tr /table表格补充标签thead、tbody、tfoot把表格语义化划分三部分thead表头区域tbody表格主体数据主要内容tfoot表格底部汇总写在 table 内部包裹 tr不会改变外观提高代码可读性方便 JS 操作表格。示例table border1 thead tr th商品/th th价格/th /tr /thead tbody tr td键盘/td td120/td /tr tr td鼠标/td td60/td /tr /tbody tfoot tr td合计/td td180/td /tr /tfoot /tableCSS 美化表格实际开发用 CSS不依赖 html 属性原生 table 的 border 不好看双线边框用 CSS 合并边框、设置宽高、背景色。 重点样式border-collapse: collapse;合并表格双线边框变成单线width设置表格总宽度text‑align单元格文字对齐完整美化示例!DOCTYPE html html langzh‑CN head meta charsetUTF‑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 td899/td td1/td /tr tr td耳机/td td199/td td2/td /tr /tbody /table /body /html解释border‑collapse: collapse;最关键把表格的双线边框合并成一条。padding:8px;单元格内部留白文字不会贴在边框上。th,td同时选中表头和普通单元格统一设置边框、对齐。新手高频错误错误 1层级写乱td 直接放在 table 里面❌table td内容/td /table✅ td 必须包在 trtable tr td错误 2单元格合并之后没有删除被合并的 td合并单元格那些被占掉位置的 td 标签一定要删掉否则多出多余格子。错误 3只写 border不写 CSS 的border‑collapse出现难看双线格子。测试可以用 html 的 border 属性正式项目全部交给 CSS 处理。错误 4一行里面单元格数量参差不齐表格错乱。正常表格每一行单元格数量要一致除非做了 colspan/rowspan 合并。错误 5把h1 p直接写 table 里面所有内容要放到 td 单元格内部。完整综合练习代码直接复制运行!DOCTYPE html html langzh‑CN head meta charsetUTF‑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 td92/td td88/td td rowspan2优秀学生/td /tr tr td小红/td td95/td td94/td !-- 本单元格被上面rowspan合并不写td -- /tr tr td小刚/td td76/td td80/td td普通/td /tr /tbody /table /body /html本篇知识点总结表格标签关系table表格容器 →tr行 →td普通单元格 /th表头单元格默认加粗居中。border1原生测试边框正式开发用 CSSborder‑collapse:collapse合并双线边框。单元格合并colspann跨列横向合并rowspann跨行纵向合并⚠合并后要删除被占用的单元格标签。语义标签thead表头tbody主体tfoot表尾只优化代码语义不改外观。CSSpadding设置单元格内边距text‑align:center文字居中。表格所有文字、内容必须写在td或th单元格里面。✍小练习写一个 3 行 4 列表格表头姓名、科目 1、科目 2、总分CSS 美化单线边框尝试一个单元格做 colspan 跨两列。