简介这份源码包面向HTML初学者与网页制作入门学习者聚焦用纯HTML搭建结构清晰、样式简洁的表格页面帮助读者理解表格标签的嵌套关系与页面布局的基本思路适合课堂练习、课后作业或自学练手等场景。压缩包共5个文件约30KB以html页面文件为主体配合jpg图片素材与md说明文档分别承担页面结构、视觉素材与使用说明的作用整体轻量、便于直接打开查看与修改。目前已有203人学习下载可作为入门阶段的参考样例。读者可通过对照源码与效果图观察表格行列划分、单元格合并及图文混排的实际写法并借助说明文档快速上手在模仿中逐步掌握表格页面的组织方式为后续学习CSS样式与复杂布局打下基础。1. 一份“简单表格”源码包为什么值得单独拆一遍上周帮一个做后台运营的朋友改页面需求只有一句话把三十多行订单数据摆成表格能看清、能对齐、手机上别散架。他先在网上找了个现成的 HTML 表格源码包解压一看table里塞满了width120、bgcolor#eee、cellspacing0这类上世纪的写法浏览器能渲染但一放到窄屏就横向溢出表头还跟着内容一起滚走。这就是“html制作简单的表格源码.zip”这类资源最真实的处境它确实能让你在十分钟内看到一个表格但能不能直接用在项目里取决于你知不知道它哪里过时、哪里该换。这份源码包定位很明确就是 HTML 静态表格的入门级模板集合核心是table、thead、tbody、tr、th、td这套标签的排列组合配合少量内联样式或独立 CSS 控制边框、间距、斑马纹和对齐。它适合三类人刚学 HTML 想找个能跑的例子照着改的新手、需要快速搭一个数据展示页面的前端初学者、以及想拿现成结构当脚手架再往里填业务字段的从业者。不适合指望它自带排序、分页、筛选的人——那是 JS 表格库的活这份资源不碰。我把它拆开跑了一遍结论是结构骨架可用样式层要重写语义和无障碍部分基本缺失。下面按“先看懂它怎么组织、再动手改成能用的、最后说清楚哪些坑别踩”的顺序走每一步都给可抄的代码和参数说明。2. 拆开源码看结构table 骨架的四个层次2.1 从最小可用表格开始先跑通再谈样式拿到源码包别急着整体打开看先自己手写一个最小版本对照。HTML 表格的合法最小结构其实只有三层table容器、行tr、单元格td。表头th是可选的但一旦你要做数据表就必须加否则屏幕阅读器和搜索引擎都分不清哪行是标题。下面这段是我从源码包里提炼出的骨架去掉了所有内联样式只留结构table caption本月订单明细/caption thead tr th scopecol订单号/th th scopecol客户/th th scopecol金额/th /tr /thead tbody tr td20240501/td td某客户/td td128.00/td /tr tr td20240502/td td另一客户/td td256.00/td /tr /tbody /table这段代码里每个标签都有明确职责。caption是表格标题必须紧跟在table开标签之后它不只是给人看的辅助技术会把它读成表格名称。thead包住表头行tbody包住数据行这两个分组不是装饰浏览器打印长表格时会在每页重复thead这是纯tr堆叠做不到的。th上的scopecol告诉辅助技术“这一格管的是它下面那一列”列多的时候这个属性比任何视觉样式都重要。参数上唯一需要留意的是caption的位置写在table外面就失效了。另外th默认加粗居中td默认左对齐这是浏览器内置样式源码包里很多模板用align属性去覆盖那是过时写法后面会讲怎么用 CSS 替代。2.2 合并单元格rowspan 与 colspan 的边界源码包里但凡稍微复杂一点的示例都会出现合并单元格。colspan管横向跨列rowspan管纵向跨行两个属性都写在td或th上值是正整数。看起来简单实际是表格结构里最容易翻车的地方因为合并之后被合并位置的那一格必须从后续行里删掉否则整张表会错位。table thead tr th scopecol部门/th th scopecol姓名/th th scopecol一季度/th th scopecol二季度/th /tr /thead tbody tr td rowspan2运营组/td tdA同学/td td120/td td135/td /tr tr tdB同学/td td98/td td110/td /tr tr td colspan2小组合计/td td218/td td245/td /tr /tbody /table逻辑说明第一行数据里“运营组”占了rowspan2意味着它纵向吃掉两行所以第二行数据只写三个td不能再写部门。最后一行“小组合计”用colspan2横跨部门和姓名两列后面只跟两个数值格。参数上rowspan的值不能超过该列剩余行数colspan的值不能超过总列数超了浏览器会静默截断表格看起来“少了一格”排查时极难定位。我一般会先把每行的单元格数算清楚再写总列数是 4第一行 11114第二行因为被 rowspan 占了一格实际写 3 个但视觉上仍是 4 列第三行 1跨两列114。这个“视觉列数守恒”是检查合并表格的唯一硬标准写完数一遍比在浏览器里瞪眼看快得多。2.3 语义分组与可访问性thead、tbody、tfoot 别省源码包里不少模板只写table和trthead、tbody、tfoot全省了。短表格看不出问题一旦数据超过一屏或者要打印差别就出来了。tfoot放汇总行浏览器渲染时允许它出现在tbody之前打印时也会重复在页脚这是做报表页的实用特性。table thead trth scopecol项目/thth scopecol预算/th/tr /thead tbody trtd服务器/tdtd8000/td/tr trtd带宽/tdtd3000/td/tr /tbody tfoot trtd合计/tdtd11000/td/tr /tfoot /table这里的关键参数是scope除了col还有row用在行首单元格上。如果表格同时有行标题和列标题左上角那一格可以写scopecolgroup或干脆留空。另一个常被忽略的是caption和summary的区别summary属性已经废弃别再用要补充说明就写在caption里或者表格外的段落里。从选型角度说如果你的表格只是两三行展示省掉thead问题不大但只要涉及数据报表、需要打印、或者有屏幕阅读器用户这三个分组就是底线。我见过一个后台页面因为没写tbodyJS 动态插入行时把数据插到了表头上面排查了半天才发现是选择器table tr把thead里的行也选中了。分组写清楚后续用querySelector(tbody tr)定位数据行才不会误伤。3. 把内联样式换成 CSS边框、斑马纹与响应式3.1 用 border-collapse 统一边框告别 cellspacing源码包里最常见的写法是table border1 cellspacing0 cellpadding8这三个属性在 HTML5 里border还能凑合用cellspacing和cellpadding已经废弃现代浏览器靠 CSS 的border-collapse和padding实现同样效果。直接改法如下table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { border: 1px solid #d0d0d0; padding: 8px 12px; text-align: left; } th { background-color: #f5f5f5; font-weight: 600; }border-collapse: collapse让相邻单元格的边框合并成一条线这是替代cellspacing0的正解如果不写默认是separate单元格之间会有缝隙看起来像老式网页。padding替代cellpadding值按内容密度调数据表一般 8 到 12 像素太挤读起来累太松一屏放不下几行。这里有个容易忽略的点border-collapse: collapse下单元格边框会互相“抢”如果只给td设边框不给th设表头那圈线会缺。所以选择器要写成th, td一起。另外width: 100%让表格撑满容器配合外层容器的max-width控制整体宽度比在table上写死像素值灵活得多。3.2 斑马纹与悬停高亮nth-child 的两个坑斑马纹用:nth-child(odd)或:nth-child(even)给tbody的行加背景这是最省事的做法。但源码包里如果tbody里混进了非tr元素或者你把汇总行也放在tbody里条纹就会错位。正确写法是把选择器限定在tbody内tbody tr:nth-child(even) { background-color: #fafafa; } tbody tr:hover { background-color: #eef4ff; }逻辑上nth-child数的是同级元素的位置不是“第几个 tr”。如果tbody里第一个子元素不是tr计数就从那个元素开始条纹整体偏移一格。所以要么保证tbody里只有tr要么用nth-of-type更稳。悬停高亮用:hover即可但要注意在触屏设备上没有悬停状态别把关键信息只放在悬停里。参数上斑马纹的底色要足够浅#fafafa这种和白色差一档就够太深会和选中态、警告色打架。悬停色建议用品牌主色的极浅版本#eef4ff这类既明显又不刺眼。我一般会把这两个颜色抽成 CSS 变量换主题时只改一处。3.3 窄屏适配给表格套一层滚动容器表格在手机上横向溢出是这类源码包最大的落地障碍。纯 CSS 的解法不是把表格压扁而是外面套一个可横向滚动的容器让表格保持最小宽度用户左右滑看完整列div classtable-wrap table.../table /div.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table { min-width: 640px; white-space: nowrap; }overflow-x: auto让容器在内容超宽时出现横向滚动条min-width: 640px保证表格不会被压到每列只剩几个字white-space: nowrap防止单元格内文字折行把行高撑乱。-webkit-overflow-scrolling: touch是给老版本移动端浏览器的惯性滚动优化新浏览器已经默认支持写上无害。这个方案的边界是列特别多比如二十列以上时横向滚动体验很差用户滑到右边就忘了左边是哪一行。那种场景要么做列冻结要么干脆改成卡片式布局每行数据变成一张小卡片。这份源码包不涉及这些但你要知道它的能力上限在哪别指望一个静态模板解决所有响应式问题。4. 避坑与排查五条血泪经验4.1 表格宽度设了 100% 却还是溢出现象table上写了width: 100%页面还是出现横向滚动条。原因通常是某个单元格里有长串不换行的内容比如订单号、URL、连续英文浏览器为了不截断内容会把表格撑宽100%只是“至少占满”不是“最多占满”。解决办法是给这类单元格加word-break: break-all或overflow-wrap: anywhere或者用table-layout: fixed强制按列宽分配。后者要配合给每列设宽度否则各列均分短内容列会浪费空间。4.2 合并单元格后表格整体错位现象用了rowspan之后后面几行的数据整体右移或左移一格。原因几乎都是被合并位置的那一格没删干净多写了一个td。排查方法是把每行的td数量加上被上方rowspan占掉的格数看是否等于总列数。我习惯在写合并表格前先在纸上画格子标好哪格被占比在代码里试错快。另一个隐蔽原因是colspan的值写大了超过实际列数浏览器会补空格子看起来像多了一列空白。4.3 表头不跟随滚动长表格读串行现象数据几十行往下滚之后完全不知道哪列是什么。原因是没有做表头固定纯静态表格默认整表一起滚。解决方式有两种给thead th加position: sticky; top: 0前提是表格的滚动发生在某个容器内而不是整个页面或者把表头单独拆出来做一个固定层。前者改动最小但要注意sticky在border-collapse: collapse下某些浏览器会有边框消失的问题遇到就换成border-collapse: separate加border-spacing: 0。4.4 内联样式和外部 CSS 打架改了不生效现象在 CSS 文件里改了td的padding页面没变化。原因是源码包里单元格上写了stylepadding:5px或cellpadding内联样式优先级高于外部选择器。排查时打开开发者工具看计算样式被划掉的那条就是被覆盖的。解决办法是先把模板里的内联样式批量清掉统一收到 CSS 里别一边改 CSS 一边留内联两套规则并存迟早出玄学问题。4.5 复制粘贴导致标签不闭合现象表格渲染出来结构混乱某些行跑到表格外面。原因是手改模板时tr和/tr没配对或者td少写闭合。HTML 解析器对表格有特殊的容错规则遇到不合法结构会自动“修复”但修复结果往往不是你想要的。排查手段是用浏览器的元素面板看最终 DOM和源码对比多出来的tbody或错位的tr一眼就能看出来。我一般改完表格会跑一遍标签配对检查编辑器基本都有这个功能别省这一步。5. 进阶用一小段 JS 给静态表格加排序静态表格最大的短板是不能排序但为这个去引入一个完整的表格库又太重。我的习惯是给th加点击排序三十行以内的数据用原生 JS 足够代码不到四十行也不破坏原有结构。思路是点击表头时读取该列所有单元格的文本按数值或字符串排序再按顺序重新插入tbody。document.querySelectorAll(th[scopecol]).forEach((th, index) { th.style.cursor pointer; th.addEventListener(click, () { const tbody th.closest(table).querySelector(tbody); const rows Array.from(tbody.querySelectorAll(tr)); const isAsc th.dataset.sort ! asc; rows.sort((a, b) { const x a.children[index].textContent.trim(); const y b.children[index].textContent.trim(); const nx parseFloat(x), ny parseFloat(y); const bothNum !isNaN(nx) !isNaN(ny); const cmp bothNum ? nx - ny : x.localeCompare(y, zh); return isAsc ? cmp : -cmp; }); rows.forEach(r tbody.appendChild(r)); th.dataset.sort isAsc ? asc : desc; }); });逻辑说明index是表头在同行中的位置直接对应数据行的第几个td所以要求表头列数和数据列数严格一致合并单元格的表格不能直接用这段。parseFloat判断是否为数值是就按数值比否则用localeCompare按中文拼音序比这样金额列和文字列都能排。dataset.sort记录当前方向再点一次反向。参数上唯一要调的是localeCompare的第二个参数写zh让中文按拼音排不写则按 Unicode 码点中文排序会很怪。这段代码的边界也要说清楚它只排当前tbody里的行不处理分页如果表格里有rowspan合并行排序会打乱合并关系那种表就别加排序。另外排序后斑马纹会跟着行一起移动视觉上条纹不再交替这是正常的因为nth-child是按位置算的行换了位置条纹自然跟着换。真要固定条纹得在排序后重新给行加类名那就复杂了三十行的表没必要。从那以后我每次拿到这类“简单表格源码”都先做三件事清内联样式、补thead/tbody、套滚动容器然后再谈往里填数据。这三步走完一个入门模板才算真正能进项目。希望帮到你。本文还有配套的精品资源点击获取