html属性不参与布局计算，colspan/rowspan等仅影响表格语义与隐式网格结构，真正驱动布局的是css；rowspan“失效”因后续行未留空被跨列，混用colspan与grid-column无效，语义化属性如role、hidden、inert可减少css hack。

直接说结论：HTML 属性本身不参与布局计算，colspan、rowspan、scope 等仅影响表格语义与隐式网格结构，真正驱动复杂布局的是 CSS —— 但它们会间接改变 CSS 的作用前提，尤其在表格渲染中容易踩坑。

为什么 rowspan 有时“失效”？

这不是 CSS 没生效，而是浏览器在构建表格隐式网格时，因后续行缺少对应列的 <td>，导致 <code>rowspan="2" 单元格无法锚定垂直空间。常见现象是：跨行单元格只显示在首行，下方空白或错位。

• 必须确保被跨越的行中，该列位置不出现其他 <td>（即“移除”被合并的单元格） <li>若第 3 行有 <code><td rowspan="2">A</td> <td>B</td>，则第 4 行只能写 <td>C</td>，不能补全为两个 <td> <li>用开发者工具检查 Elements 面板里的实际 DOM 结构，比肉眼数标签更可靠</li> <h3> <code>colspan 和 CSS grid-column 能混用吗？

  不能。二者作用域完全不同：colspan 是 HTML 表格的结构属性，只对 <table> 生效；<code>grid-column 是 CSS Grid 的布局声明，适用于任意 display: grid 容器。混用会导致语义混乱且无效果。

  • 想用 Grid 做二维布局，就别套 <table>，直接用 <code>div + grid-template-areas
  • 如果已有遗留表格数据需展示，colspan 可保留，但额外样式应通过 class 控制，而非依赖它“撑开”布局
  • 响应式场景下，colspan 无法动态变化，而 Grid 的 grid-template-columns 可配合媒体查询重定义

  哪些 HTML 属性能“辅助” CSS 布局？

  真正起辅助作用的不是布局属性，而是能减少 CSS hack 的语义化标记：

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载
  • role="navigation" 或 aria-labelledby：让屏幕阅读器正确识别区域，避免为可访问性强行加 wrapper 元素
  • hidden 属性：比 display: none 更早介入渲染流程，适合条件性隐藏整块内容
  • inert：原生禁用交互，比一堆 pointer-events: none + tabindex="-1" 更干净
  • 语义化标签如 <main></main>、<aside></aside>：CSS 中可用元素选择器直接定位，无需额外 class

  最容易被忽略的一点：HTML 属性不会“增强”CSS 布局能力，但错误使用（比如滥用 colspan 模拟 Grid）会让调试变成猜谜——浏览器渲染表格时的隐式网格推导逻辑，远比你写的 CSS 规则更难预测。

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