参考资料

1. HTML 内联元素
2. HTML 框架
3. html元信息标签详细说明以及案例
4. HTML高度与宽度设置 Iframe
5. HTML使用表格 布局
6. HTML id 属性在 JavaScript 中的使用
7. HTML/MarkDown互转有哪些
8. HTML 常用1600 万种不同颜色颜色代码表

HTML 合并单元格

简介

HTML 表格中可以通过合并单元格来创建更复杂的布局，主要使用 colspan 和 rowspan 属性。

主要标签和属性

• <table>: 定义表格

• <tr>: 定义表格行

• <td>: 定义标准单元格

• <th>: 定义表头单元格

• colspan: 水平合并单元格

• rowspan: 垂直合并单元格

用法

• colspan="n": 使单元格横跨 n 列

• rowspan="n": 使单元格纵跨 n 行

实例

<table border="1">
  <tr>
    <th colspan="2">合并的标题</th>
  </tr>
  <tr>
    <td rowspan="2">合并的单元格</td>
    <td>单元格1</td>
  </tr>
  <tr>
    <td>单元格2</td>
  </tr>
</table>

功能

• 创建复杂的表格布局

• 减少重复内容

• 提高表格可读性

• 实现标题跨多列或多行

CSS 扩展

可以通过 CSS 增强合并单元格的样式：

/* 合并单元格样式 */
td[colspan], th[colspan] {
  background-color: #f2f2f2;
  text-align: center;
}

/* 垂直合并单元格样式 */
td[rowspan], th[rowspan] {
  vertical-align: middle;
  background-color: #e6e6e6;
}

/* 表格基本样式 */
table {
  border-collapse: collapse;
  width: 100%;
}