表格错位、边框消失、对齐异常的根源在于默认样式干扰和嵌套结构错误；必须用包裹/，禁止单独嵌套，且需用css设置border和border-collapse:collapse，并区分（居中加粗）与（左对齐）的语义及样式。
<table> 标签本身不难，但实际写出来经常错位、边框消失、文字对不齐——核心问题不在会不会写，而在默认样式干扰和嵌套逻辑没理清。
<h3>表格基本结构必须包含 <code><tr>、<code><td> 或 <code><th>
<p>很多人只写 <code><table><td>姓名</td></table>，浏览器会尝试“修复”，但结果不可控。真实渲染依赖严格的行容器：<tr> 是必须的，<code><td>（普通单元格）和 <code><th>（表头单元格，自带加粗+居中）不能直接挂在 <code><table> 下。
<p>正确写法示例：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
</tr>
</table>
<ul><li><code><th> 建议只用于第一行或首列，语义上表示标题，屏幕阅读器会识别
<li>少用 <code>colspan/rowspan 初期，容易导致后续 <tr> 列数计算错乱
<li>空单元格别留空白，写 <code><td> </td> 或 <td></td> 都行，但不要只换行不写标签
没有边框？不是代码错，是 CSS 默认把边框设为 0
写了 <table> 却看不到线，不是 HTML 错了，是浏览器默认 <code>border: 0 + border-collapse: separate。想立刻看到边框，最简方式是在 <table> 上加内联样式：
<pre class="brush:php;toolbar:false;"></pre>
<table style="border: 1px solid #000; border-collapse: collapse;"><ul>
<li>
<code>border-collapse: collapse 让相邻边框合并，否则会出现双线间隙
<td> 加 <code>border 也行，但必须每格都加，且 collapse 才能统一
文字靠左/居中不对？优先查 text-align 和 <th> 的默认行为
<p><code><th> 默认 <code>text-align: center，<td> 默认 <code>left。如果整表要居中，别在每个 <td> 上重复写样式，改父级：
<pre class="brush:php;toolbar:false;"></pre>
<table style="text-align: center;"><ul><li>这个设置会被 <code><th> 继承，所以表头依然居中，内容也居中了
<li>若只要某列右对齐（比如数字列），给该列所有 <code><td> 加 <code>style="text-align: right;"，或者用 <col> 标签配合 class 控制（进阶但更干净）
<center></center> 或 align="center" 属性，HTML5 已废弃真正麻烦的不是写几行 <table>，而是后期加样式时发现 <code><th> 的加粗和居中和你想要的排版冲突，或者合并单元格后某一行突然多出空隙——这时候回看是否漏了 <code><tr>、是否 <code>border-collapse 没生效，比重写整个表格更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
