csstable跨列居中_html中table表格如何跨行或跨列合并单元格

在html中的table表格实现跨行或跨列合并单元格，需要用到以下两个属性：

1、跨列colspan属性：就是合并左右关系的单元格；

2、跨行rowspan属性：就是合并上下关系的单元格；

而在table表格中，可以使用跨行或跨列属性的单元格有以下两种：

1、表头单元格➜由

标签创建的表头信息，其文本默认为居中的粗体文本；

2、标准单元格➜由

标签创建的数据信息，其文本默认为左对齐的普通文本；

也就是说：

在

和两个标签中，都可以使用跨列colspan属性和跨行rowspan属性实现合并单元格；

下面，我们具体演示table表格如何跨行或跨列合并单元格的？

第一种：合并

表头单元格

1、跨列合并

表头单元格使用colspan属性表头左右跨多少列，colspan属性值就设置多少，但不能大于表格实际的最大列数。

比如，下列演示代码中，第2个表头单元格横跨两列：

第1个表头单元格	第2个表头单元格
第2行,第1列	第2行,第2列	第2行,第3列
第3行,第1列	第3行,第2列	第3行,第3列
第4行,第1列	第4行,第2列	第4行,第3列

以上表头横跨两列单元格的表格代码在浏览器中显示效果分析如下图：

2、跨行合并

表头单元格使用rowspan属性表头上下竖跨多少行，rowspan属性值就设置多少，但不能大于表格实际的最大行数。

比如，下列演示代码中，第2个表头单元格竖跨两行：

第1个表头单元格	第1行,第2列
第2个表头单元格	第2行,第2列
第3行,第2列
第3个表头单元格	第4行,第2列

以上表头竖跨两行单元格的表格代码在浏览器中显示效果分析如下图：

第二种：合并

标准单元格

1、跨列合并

标准单元格使用colspan属性

如果想要一个标准单元格左右横跨多列，可以使用colspan属性，其数值大小，表示该单元格跨多少列，但不能大于表格实际的列数。

比如，想要跨两列，colspan属性值就设置为2，演示代码如下：

td单元格	td单元格
td单元格	td单元格	td单元格

以上代码在浏览器中显示效果如下：

3、跨行合并

标准单元格使用rowspan属性

如果想要一个标准单元格竖跨多行，可以使用rowspan属性，其数值大小，表示该单元格跨多少行；

比如，想要跨两行，rowspan属性值就设置为2，演示代码如下：

td单元格	td单元格	td单元格
td单元格	td单元格

以上代码在浏览器中显示效果如下：