参考资料

1. HTML id 属性详解
2. Html转PHP代码有哪些
3. HTML "计算机输出"标记
4. Html转义工具有哪些
5. 用于长引用的 HTML
6. html元信息标签详细说明以及案例
7. Html过滤工具有哪些
8. HTML移除边框 Iframe

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。