文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
cellpadding和cellspacing已废弃，不应再使用；现代应改用css的padding（作用于td/th）控制内容与边框距离，border-spacing配合border-collapse:separate控制单元格间距。
table 的 cellpadding 和 cellspacing 还管用吗？
在现代 HTML 中，cellpadding 和 cellspacing 属性虽仍能被浏览器解析（尤其在内联写法中），但它们早已被废弃（HTML5 不再支持），且行为不可靠——比如在某些 CSS 重置库或 Flex/Grid 布局嵌套下完全失效。
真正可控、可维护的方式是用 CSS 的 padding 控制单元格内容距离边框的距离，用 border-collapse + border-spacing 控制单元格之间的间距。
常见错误现象：
– 写了 cellspacing="0" 却仍有白边
– 表格嵌套时内层表格间距不受控
– 使用 border-collapse: collapse 后 border-spacing 失效（这是预期行为）
关键点：
– border-spacing 只在 border-collapse: separate（默认值）下生效
– 它接受一个或两个值：border-spacing: 4px（水平=垂直），或 border-spacing: 4px 8px（水平 垂直）
– padding 必须作用于 <td> 或 <code><th>，而不是 <code><table>
<h3>如何让表格单元格“紧贴”不留空隙？
</h3>
<p>想实现无间隙网格效果（比如日历、像素画、紧凑数据表），核心是两步：关闭边框合并间隙 + 统一单元格内边距。</p>
<p></p>
<pre class="brush:php;toolbar:false;">table {
border-collapse: collapse;
}
td, th {
padding: 0;
margin: 0;
}</pre>
<p>注意：<br>– <code>border-collapse: collapse 会让相邻边框合并，此时 border-spacing 被忽略（不是 bug，是规范）
– 如果你还定义了 border，合并后可能看到双倍粗细（比如两个 1px 边框合为 1px，但渲染有时有 subpixel 差异）
– margin 对 <td> 无效（表格单元格不参与常规文档流），所以设了也白设
<h3>table 的外边距（margin）为什么不起作用？
</h3>
<p><code><table> 默认是块级元素，<code>margin 理论上可用，但常被忽略，原因通常是：
– 父容器设置了 font-size: 0 或 line-height: 0，导致 table 下方出现看不见的空白行（实际是基线对齐产生的间隙）
– 表格本身有默认 display: table，若父元素是 inline 或 flex，可能触发对齐行为（如 align-items: baseline）
– 某些 CSS 重置样式（如 normalize.css）会把 table 设为 vertical-align: middle，影响上下留白
实操建议：
– 给 <table> 加 <code>vertical-align: top 或 bottom
– 父容器设 font-size: 0 后，记得给 <td> 单独恢复字体大小<br>– 更稳妥的方式：用 <code>display: block 强制 table 当作普通块元素处理（不影响内部结构）
响应式表格里 spacing 怎么动态调整？
移动端小屏下，固定 border-spacing: 8px 可能撑破容器。不能只靠媒体查询改数值，更要考虑视觉密度。
推荐组合：
– 小屏时切换为 border-collapse: collapse，消除所有间隙
– 配合 padding 缩减至 4px 或 2px
– 若需保留分隔感，用 background-color + box-shadow 模拟“间隙”，而非依赖 border-spacing
示例：
@media (max-width: 768px) {
table { border-collapse: collapse; }
td, th { padding: 2px 4px; }
}
容易被忽略的一点：当用 border-spacing 实现“虚线间隔”时（比如每行之间加 1px 空白），它无法单独控制行间或列间——必须用 border 或伪元素模拟，否则在不同缩放比例下容易错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
