表格需闭合标签、正确使用th/td语义、设置border-collapse:collapse并单独为单元格设边框；表头用th加scope属性，空单元格填 ；文字对齐优先用table或col控制。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

直接写 <table> 就能生成表格，但多数人卡在边框不显示、文字对不齐、表头和内容样式打架这三处。 <h3>基础结构必须闭合，<code>tr 和 td 不能漏

浏览器不会报错，但少一个 或多嵌一层 <tr>，会导致后续所有行错位，尤其是合并单元格时更明显。常见现象是某列突然空一格、最后一行被吞掉、控制台出现 <code>HTML table row has fewer cells than required 警告。

• <table> 是容器，必须有开始和结束标签 <li>每行必须用 <code><tr> 包裹，哪怕只有一行 <li>每个单元格必须是 <code><td>（数据）或 <code><th>（表头），不能只写文本不包标签 <li>如果某格为空，至少填一个 <code> ，否则边框可能消失

th 不是“加粗快捷键”，用错语义会崩 accessibility

<th> 的核心作用是声明该单元格在表格结构中的角色，不是为了视觉加粗。读屏软件靠它识别列/行含义，搜索引擎也依赖这个语义。 <ul><li>第一行的“姓名”“年龄”这类列名，必须用 <code><th>，且建议加 <code>scope="col"

• 第一列的“张三”“李四”如果是行标识符（比如产品名），才考虑 <th scope="row"> <li>数据行里出现的“小计”“合计”仍是数据，用 <code><td>，别为了居中加粗硬套 <code><th> <li>错误写法：<code><tr> <th>1</th> <th>张三</th> <th>25</th> </tr>——全是数据，不该用 th

边框不显示？先查 border-collapse: collapse

默认 <table> 没边框，加 <code>border="1" 能临时看到，但会产生双线间隙；现代写法必须配 border-collapse: collapse，否则相邻单元格边框会叠加成两倍粗细。

• 内联调试最快：<table style="border-collapse: collapse;"><li>每个 <code><td> 或 <code><th> 都得单独加 <code>border: 1px solid #000;，只给 <table> 加没用 <li>整表文字居中，别一个个 <code><td> 写 <code>text-align，直接 <table style="text-align: center;">，<code><th> 会继承且保持默认居中 <li>数字列右对齐，给对应列的所有 <code><td> 加 <code>style="text-align: right;"，或用 <col> 标签统一控制（更干净）

  真正难的不是搭出第一版表格，而是改样式时发现 <th> 的加粗+居中和你想要的排版冲突，或者合并后某行高度异常——这时候回看是否漏了 <code><tr>、<code>border-collapse 是否生效、colspan 是否让该行单元格总数变少了，比重写整个表格快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！