参考资料

1. HTML 表格表头单元格
2. HTML 图像
3. HTML 中的空格详解
4. 隐形水印嵌入技术详解
5. Html表格生成器有哪些
6. HTML 颜色采用的是 RGB 颜色
7. HTML 用于联系信息的
8. HTML 多媒体

HTML 合并单元格

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%;
}