HTML表格如何添加空行？

在HTML表格中创建空行（即视觉上留出空白间隔）可通过多种方法实现,以下是最常用且符合标准的解决方案：

方法1：使用空单元格（推荐）

<table border="1">
  <tr>
    <td>内容单元格1</td>
    <td>内容单元格2</td>
  </tr>
  <!-- 空行实现 -->
  <tr>
    <td colspan="2" style="height: 30px; background-color: transparent"></td>
  </tr>
  <tr>
    <td>新行内容1</td>
    <td>新行内容2</td>
  </tr>
</table>

关键点：

1. colspan="2" 使空单元格横跨所有列（数字需匹配表格列数）
2. height: 30px 通过CSS控制行高（推荐使用CSS类）
3. background-color: transparent 确保透明背景

方法2：使用CSS伪元素（更简洁）

<style>
  .spacer-row {
    height: 40px; /* 控制空行高度 */
    display: table-row;
  }
</style>
<table>
  <tr><td>第一行</td></tr>
  <tr class="spacer-row"></tr> <!-- 空行 -->
  <tr><td>第二行</td></tr>
</table>

优势：

• 无需冗余HTML标签
• 高度通过CSS精准控制
• 符合语义化标准

方法3：透明边框（兼容旧浏览器）

<tr style="border-top: 15px solid transparent; border-bottom: 15px solid transparent">
  <td colspan="100%"></td>
</tr>

注意事项

1. 可访问性：空行需添加aria-hidden="true"避免屏幕阅读器干扰

   <tr aria-hidden="true">...</tr>

2. 响应式适配：使用相对单位（如vh）确保移动端兼容

   .spacer-row { height: 3vh; }

3. SEO优化：避免使用 等空白字符，可能被搜索引擎视为无效内容

最佳实践示例

<style>
  .table-spacer {
    height: 1.5rem;
    background-color: inherit !important;
  }
</style>
<table>
  <tr><td>产品A</td><td>$29</td></tr>
  <tr class="table-spacer" aria-hidden="true">
    <td colspan="2"></td>
  </tr>
  <tr><td>产品B</td><td>$49</td></tr>
</table>

效果说明：

• 在”产品A”和”产品B”间创建了垂直间距
• 保留表格背景色一致性
• 通过ARIA属性提升可访问性
• 使用相对单位rem确保响应式适配

引用说明：本文方法遵循W3C HTML5标准，参考MDN Web Docs的表格最佳实践及WebAIM的可访问性指南，CSS方案符合WCAG 2.1 AA标准,确保视觉层次不依赖纯视觉表现。