如何给HTML表格添加外边距？MARGIN属性控制页面排版-html教程-PHP中文网

html表格不能直接用设置外边距，必须通过css的margin属性（如style="margin: 16px;"或外部类）控制，且margin: 0 auto水平居中需配合明确宽度，同时注意外边距塌陷及、上margin无效等规则。

如何给html表格添加外边距？margin属性控制页面排版

给 `<table> 直接加 <code>margin` 是最简单有效的方式
HTML 表格本身不支持 `margin` 属性作为标签属性（比如 `<table margin="10">），这种写法完全无效，浏览器会静默忽略。必须用 CSS 控制。 <p>正确做法是把 <code>margin` 写在 `style` 属性里，或通过 class 绑定外部样式：

`<table style="margin: 16px;"> —— 四边统一 16px <li><code><table style="margin-top: 10px; margin-bottom: 20px;"> —— 只控制上下间距，不影响左右对齐 <li><code><table class="data-table"> + <code>.data-table { margin: 0 auto; }` —— 水平居中，前提是设了 `width`
注意：`margin` 作用对象是整个 `<table> 元素盒子，不是某一行或某一列；它控制的是表格与周围其他元素（如段落、标题、另一个表格）的距离。 <h3> <code>margin` 在表格上不会触发外边距合并（collapsing margins）？错，会

很多人误以为表格是“特殊元素”，其实 <table> 默认是块级元素，它的 <code>margin-top 和紧邻的前一个块级元素（比如 <p></p> 或 <h2></h2>）的 margin-bottom 依然会发生塌陷。

现象举例：如果 <p></p> 设了 margin-bottom: 24px，紧接着 <table style="margin-top: 16px;">，实际间距不是 40px，而是取两者较大值——24px。 <p>解决办法（选其一）：</p> <ul> <li>只设一边 margin（比如统一用 <code>margin-top，前一个元素不设 margin-bottom）

给表格父容器加 padding 或 border（哪怕 border: 1px solid transparent）

改用 display: inline-block 让表格脱离普通文档流（但会失去默认块级宽度）

想调表格内部行/列间距？别碰 `margin`，用对的地方才有效

margin 对 <tr>、<code><td>、<code><th> 基本无效——因为这些元素默认是表格内部渲染模型的一部分，<code>margin 不起作用（除非显式设 display: block，但这会破坏表格结构）。

真正该用的方案：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

单元格内边距：td, th { padding: 8px 12px; }
控制行高：tr { height: 40px; } 或 td { line-height: 1.5; }
隔行间距：给 tr 加 border-bottom 配合 border-spacing（需设 border-collapse: separate）
表格整体边框和间隙：table { border-collapse: separate; border-spacing: 0 8px; } —— 第二个值控制行间距

顺带一提：border-spacing 只在 border-collapse: separate 下生效，且不能用百分比或负值。

用 `margin: auto` 居中表格时，这几个条件缺一不可

想让表格在页面中水平居中，margin: 0 auto 看似简单，但常因遗漏条件而失败：

表格必须有明确宽度（width: 600px 或 width: 80%），否则 auto 无意义
不能是 display: table 的匿名盒子（比如直接写 <div><table>...</table></div> 通常没问题，但嵌套在 flex 容器里可能被干扰）
父容器需是块级上下文，且宽度大于表格自身宽度
避免同时设置 float 或 position: absolute，它们会让 margin: auto 失效