简介：这份资源是面向网页设计初学者与前端入门者的HTML表格制作练习包，围绕表单与表格的搭建展开，适合正在学习HTML基础语法、需要动手完成课堂作业或课后练习的学生参考。压缩包共5个文件，以html页面为主体，搭配3张jpg示例图片和1份md说明文档，整体约30KB，体积轻巧便于快速下载与本地打开查看。其中html文件承载表格结构代码，图片用于呈现作业效果与素材展示，md文档则对内容作简要说明，方便读者对照理解页面布局与标签用法。目前已有203人学习下载，说明该示例在入门练习场景中具有一定参考价值。读者可通过源码直接观察表格行列、单元格合并及表单元素的写法，结合效果图核对渲染结果，快速掌握HTML表格的常用标签与结构组织方式，为后续学习CSS样式美化打下基础。
1. 从一份表格源码说起：为什么手写 HTML 表格比拖拽工具更值得投入
很多人第一次接触网页结构，都是从一张表格开始的。课程表、价格对比、数据报表，这些场景天然适合用表格来承载。但真正动手时，不少人会直接打开可视化编辑器拖拽，或者从某个模板站下载一份现成的 HTML 表格源码，改改文字就上线。结果一旦要调整列宽、合并单元格、适配手机屏幕，就发现改不动了——因为底层结构是工具生成的，嵌套层级混乱，样式和内容搅在一起。
这份「html制作简单的表格源码.zip」指向的正是最朴素也最值得掌握的能力：不依赖任何框架和构建工具，用原生 HTML 标签配合少量 CSS，从零写出一张结构清晰、语义正确、能应对常见数据展示需求的表格。它适合刚入门前端、需要快速交付静态页面的开发者，也适合后端同学临时要输出一份可读性好的数据报告。核心价值不在于表格本身多复杂，而在于你能完全掌控每一行代码的意图，后续改起来不痛苦。
2. 拆解一张 HTML 表格的最小骨架：标签、语义与浏览器默认行为
2.1 为什么 table 标签不是「过时」的代名词
早年间用 table 做整站布局的做法确实被淘汰了，但这不代表 table 标签本身有问题。HTML 规范里，table 的定位非常明确：展示二维表格数据。浏览器对 table 的默认渲染逻辑也相当成熟——自动计算列宽、处理行高对齐、支持跨行跨列。很多新手用 div 加 flex 硬模拟表格，结果遇到内容长短不一时列宽对不齐，反而要写更多补丁。常见做法是：只要数据关系是「行与列交叉定位」，就优先用 table，别跟浏览器内置能力较劲。
2.2 最小可用表格的五个必备标签
一张能被浏览器正确解析、被屏幕阅读器识别的表格，至少需要这几个标签配合：
<!-- 最小可用表格：caption 说明用途，thead/tbody 划分区域，th 标记表头 --> <table border="1"> <caption>2024 年季度销售汇总</caption> <thead> <tr> <th scope="col">季度</th> <th scope="col">销售额（万元）</th> <th scope="col">同比增长</th> </tr> </thead> <tbody> <tr> <td>Q1</td> <td>128</td> <td>+12%</td> </tr> <tr> <td>Q2</td> <td>143</td> <td>+8%</td> </tr> </tbody> </table>逻辑说明：caption是表格标题，默认显示在表格上方，对无障碍访问很重要；thead包裹表头行，tbody包裹数据行，浏览器打印长表格时会在每页重复表头；th配合scope="col"明确告诉辅助设备这是列标题。参数方面，border="1"只是调试用的临时边框，正式页面应该用 CSS 控制。scope还可以取row、colgroup，分别对应行标题和列组标题。
2.3 合并单元格：rowspan 与 colspan 的取值边界
合并是表格里最容易翻车的地方。colspan控制横向合并几列，rowspan控制纵向合并几行。关键规则：合并后被「吃掉」的单元格必须从后续行里删掉，否则表格结构会错位。
<!-- 跨两列的表头 + 跨两行的行标题 --> <table border="1"> <tr> <th rowspan="2">区域</th> <th colspan="2">上半年</th> </tr> <tr> <th>Q1</th> <th>Q2</th> </tr> <tr> <td>华东</td> <td>56</td> <td>62</td> </tr> </table>这里第一行只有两个 th，第二个 th 横跨两列；第二行补上 Q1、Q2 两个 th，正好填满 colspan 腾出的位置。如果第二行少写一个 th，浏览器会自行补空位，但结构就不可控了。我一般会先在纸上画出网格，标好每个单元格占几行几列，再写代码，比事后调试快得多。
3. 用 CSS 把表格从「能看」推到「好用」：边框、对齐与斑马纹
3.1 border-collapse 与 border-spacing 的取舍
默认情况下，每个 td 有自己的边框，相邻单元格边框会叠加成双线。border-collapse: collapse让相邻边框合并成一条，这是绝大多数数据表格想要的视觉效果。如果反而想要单元格之间有间隙，就用border-spacing配合border-collapse: separate。
/* 合并边框，统一线条颜色和粗细 */ table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { border: 1px solid #d0d0d0; padding: 8px 12px; text-align: left; }参数说明：width: 100%让表格撑满容器，列宽由浏览器按内容比例分配；padding给单元格内容留呼吸空间，8px 垂直、12px 水平是常见起点；text-align: left对文本列友好，数字列通常改成right方便比对位数。
3.2 斑马纹与悬停高亮：两个伪类搞定
长表格里，眼睛容易串行。给偶数行加浅背景，鼠标悬停时整行变色，成本极低但体验提升明显。
/* 斑马纹：只作用于 tbody 内的行，不影响表头 */ tbody tr:nth-child(even) { background-color: #f7f9fc; } /* 悬停高亮：用 outline 避免布局抖动 */ tbody tr:hover { background-color: #eef4ff; outline: 1px solid #b8d0f0; }注意nth-child(even)是从 tbody 内部重新计数的，所以表头不会被算进去。用outline而不是border做悬停边框，是因为 outline 不占盒模型空间，不会导致行高跳动。如果表格行数很少，斑马纹反而显得花哨，可以不加。
3.3 数字列对齐与表头区分
数字右对齐、表头加粗加底色，是数据表格的通用惯例。表头可以用background-color和font-weight与数据行拉开层次。
thead th { background-color: #e8eef7; font-weight: 600; white-space: nowrap; /* 防止表头文字换行 */ } /* 给数字列加类名，统一右对齐 */ td.num { text-align: right; font-variant-numeric: tabular-nums; /* 等宽数字，对齐更整齐 */ }font-variant-numeric: tabular-nums让数字宽度一致，上下行小数点能对齐，财务类表格尤其受用。white-space: nowrap防止「销售额（万元）」这种长表头被挤成两行，但列数多时要慎用，可能撑破容器。
4. 响应式表格的三种落地路径：横向滚动、卡片化与优先级隐藏
4.1 外层容器加 overflow-x 是最省事的方案
手机屏幕窄，列数一多必然溢出。最稳妥的做法是给表格套一个可横向滚动的容器，表格本身保持最小宽度。
<!-- 滚动容器包裹表格，表格设最小宽度防止列被压扁 --> <div class="table-wrap"> <table>...</table> </div>.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; /* 移动端惯性滚动 */ } .table-wrap table { min-width: 600px; /* 低于这个宽度就出现滚动条 */ }逻辑说明：overflow-x: auto只在内容超出时出现滚动条，不超出时不占空间。min-width保证列不会被压到无法阅读。这个方案改动最小，适合后台管理类页面，缺点是用户需要左右滑动才能看全。
4.2 用媒体查询把表格变成卡片列表
面向消费者的页面，横向滚动体验一般。可以在小屏幕下把每行变成一张卡片，用>@media (max-width: 600px) { /* 隐藏表头，每行变成块级卡片 */ thead { display: none; } tbody tr { display: block; margin-bottom: 12px; border: 1px solid #d0d0d0; border-radius: 6px; } tbody td { display: flex; justify-content: space-between; padding: 8px 12px; border: none; border-bottom: 1px solid #eee; } /* 用>@media (max-width: 600px) { /* 隐藏第 4 列及之后的所有列 */ th:nth-child(n+4), td:nth-child(n+4) { display: none; } }
nth-child(n+4)表示从第 4 个开始全部选中。这个方案简单粗暴，适合「详情页看全量、列表页看摘要」的场景。注意隐藏后要确保剩余列能独立表意，别把关键数据藏没了。
5. 避坑与排查：表格源码里最容易翻车的五个地方
5.1 现象：表格右侧多出一列空白，怎么调都对不齐
原因：某一行 td 数量比表头多了一个，或者合并单元格后没有删掉被占位的 td。浏览器会按最大列数渲染，多出的空位就显示为空白列。解决：逐行数 td 和 th 的总数，合并单元格时把被覆盖的位置从 HTML 里删掉，而不是留空 td。
5.2 现象：设置了 width 但列宽完全不听话
原因：表格的自动布局算法会优先满足内容宽度，width只是建议值。如果某列内容特别长，浏览器会强行撑开。解决：给 table 加table-layout: fixed，然后显式指定每列宽度（可以用 colgroup 或 th 的 width）。fixed 布局下，列宽完全按第一行或 colgroup 的定义来，不再受内容影响。
5.3 现象：移动端表格把页面撑出横向滚动条，整页都能左右拖
原因：表格溢出后没有独立滚动容器，把 body 撑宽了。解决：给表格外层包一个overflow-x: auto的 div，并确保这个 div 的宽度不超过视口。同时检查表格是否设了过大的 min-width，必要时调小。
5.4 现象：斑马纹在合并单元格后错乱，颜色对不上行
原因：nth-child是按 DOM 里的 tr 顺序计数的，合并单元格导致某些 tr 实际占位不同，视觉上行号与计数不一致。解决：改用nth-of-type或者手动给需要变色的 tr 加类名。合并单元格较多的表格，建议放弃自动斑马纹，用类名精确控制。
5.5 现象：打印时表格被截断，表头只在第一页出现
原因：浏览器打印默认不重复 thead，长表格跨页后后续页面没有表头。解决：确保表头放在 thead 里（不要用 tr 直接包 th），现代浏览器打印时会自动在每页重复 thead。另外给 table 加page-break-inside: avoid可以防止单行被跨页切断。
6. 从静态源码到可维护模板：用数据驱动生成表格行
手写十几行表格还能接受，上百行就不现实了。实际项目里，表格数据通常来自接口或本地数组，用 JavaScript 动态生成行是更可持续的做法。下面是一个不依赖任何库的最小实现：
// 数据源：数组对象，字段与表头对应 const rows = [ { quarter: 'Q1', amount: 128, growth: '+12%' }, { quarter: 'Q2', amount: 143, growth: '+8%' }, { quarter: 'Q3', amount: 156, growth: '+9%' } ]; // 目标 tbody 容器 const tbody = document.querySelector('#sales-table tbody'); // 用 map 生成 HTML 字符串，再一次性插入，减少重排 const html = rows.map(row => ` <tr> <td>${row.quarter}</td> <td class="num">${row.amount}</td> <td>${row.growth}</td> </tr> `).join(''); tbody.innerHTML = html;逻辑说明：map把每条数据转成一行 tr 的 HTML 字符串，join('')拼成一个完整片段，最后一次性赋给innerHTML。这比循环里逐行appendChild性能好，因为只触发一次重排。参数方面，row.amount直接插入没有做转义，如果数据来自用户输入，需要用textContent或转义函数处理，防止 XSS。数字列加了class="num"复用前面的右对齐样式。
如果数据量很大（比如上千行），一次性插入仍然会卡，这时候要考虑分页或虚拟滚动。但对大多数静态报表场景，上面的写法足够用。我自己的习惯是：先把静态 HTML 表格调好样式，确认视觉没问题，再把行内容抽成模板字符串，用数据替换。这样样式调试和逻辑开发分开，出问题容易定位。
另外，动态生成时要注意表头和数据列数必须一致。我一般会在代码里加一句断言，比如if (Object.keys(rows[0]).length !== thCount) console.warn('列数不匹配')，提前暴露问题比上线后让用户看到错位表格强。希望帮到你。
本文还有配套的精品资源，点击获取
