使用colspan="n"时该行td数量须为总列数−n+1，rowspan="n"则对应列后续n−1行必须完全删除td标签，二者可组合但覆盖区域严禁重复定义td。
colspan="N" 后这行要少写 N−1 个 <td>
<p>浏览器不会自动帮你“跳过”被合并掉的列位置，它只认 <code><tr> 下子元素数量。比如你写 <code><td colspan="3">总课表</td>，这一行就只该有这一个 <td>；如果后面还跟了 <code><td>周一</td>
<td>周二</td>，那实际占了 5 列（3+1+1），但其他行只有 3 个 <td>，表格立刻错位。
<p>常见错误现象：</p>
<ul>
<li>第一行多出一个空单元格</li>
<li>表头文字挤到右侧、对不齐下方列</li>
<li>开发者工具里看到某行 <code><td> 数量明显多于其他行
<p>实操建议：</p>
<ul>
<li>先确定整张表的总列数（比如 7 天 + 1 节次列 + 1 备注列 = 9 列），再设 <code>colspan="9"
colspan="N"，该 <tr> 内剩余 <code><td> 数量 = 总列数 − N
<li>别用 <code><caption></caption> 替代跨列表头——它不参与列对齐，纯属语义标题rowspan="N" 后对应列在后续 N−1 行必须留空
常见错误现象： 实操建议：rowspan 不是“复制粘贴”，而是“占用”。你在第 2 行第 1 列写了 <td rowspan="3">上午</td>，等于告诉浏览器：“从第 2 行起，连续 3 行的第 1 列都归我管”。那么第 3 行和第 4 行的第 1 列，不能出现任何 <td>，也不能写 <code><td></td> —— 必须彻底删掉那个位置的标签。
<td> 数量是否与预期列数一致，尤其关注被 rowspan 覆盖的列
<li>连堂课（如跨 2 节）就用 <code>rowspan="2"，下一行同一列直接跳过，不是留 <td></td>
rowspan 和 colspan 能一起用，但覆盖区域严禁重复写
<td>
<p>一个单元格同时跨 2 行 2 列，写法是 <code><td rowspan="2" colspan="2">实验课</td>。这表示它占据一个 2×2 的矩形区域：假设它在第 3 行第 2 列，那它实际覆盖的是 (3,2)、(3,3)、(4,2)、(4,3) 四个逻辑位置。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- 这四个位置中，其余三个 必须全部删掉对应的
<td>，哪怕内容为空 <li>不要在第 4 行第 3 列补 <code><td></td>—— 这会破坏合并结构，导致错位或静默截断 - 合并区域不能超出表格定义的最大行列数，否则部分旧浏览器可能不渲染或报错
- 小屏优先项目，放弃纯 table 布局，改用
display: grid或display: flex重构 - 若必须保留 table 结构，父容器加
overflow-x: auto，让用户手动滑动查看全表 - 别指望媒体查询里用
display: block强转<td> —— 会丢失表格语义和可访问性 <p>真正难的不是属性怎么写，而是每次增删一行或一列前，先手动画个表格矩阵，标出所有 rowspan/colspan 覆盖范围，再逐行核对 <code><td> 数量是否守恒。</td>
响应式场景下，<table> + rowspan/colspan 基本失效
<p>手机屏幕窄，但 <code>colspan 只会让单元格更宽，rowspan 只会让单元格更高，它们不触发重排。你加 table { width: 100% } 或 td { font-size: 12px } 都只是缩放，无法解决列挤压、文字折行、横向滚动困难等问题。
实操建议：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
