WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

html中table表格如何跨行或跨列合并单元格

更新时间:2021-02-10 13:20 作者:刘代码点击:

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

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

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

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

1、表头单元格➜由<th>标签创建的表头信息,其文本默认为居中的粗体文本;

2、标准单元格➜由<td>标签创建的数据信息,其文本默认为左对齐的普通文本;

也就是说:

在<th>和<td>两个标签中,都可以使用跨列colspan属性和跨行rowspan属性实现合并单元格;

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

第一种:合并<th>表头单元格

1、跨列合并<th>表头单元格使用colspan属性

<th>表头左右跨多少列,colspan属性值就设置多少,但不能大于表格实际的最大列数。

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

Markup
<table border="1">
<tr>
<th>第1个表头单元格</th>
<th colspan="2">第2个表头单元格</th>
</tr>
<tr>
<td>第2行,第1列</td>
<td>第2行,第2列</td>
<td>第2行,第3列</td>
</tr>
<tr>
<td>第3行,第1列</td>
<td>第3行,第2列</td>
<td>第3行,第3列</td>
</tr>
<tr>
<td>第4行,第1列</td>
<td>第4行,第2列</td>
<td>第4行,第3列</td>
</tr>
</table>

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

2、跨行合并<th>表头单元格使用rowspan属性

<th>表头上下竖跨多少行,rowspan属性值就设置多少,但不能大于表格实际的最大行数。

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

Markup
<table border="1">
<tr>
<th>第1个表头单元格</th>
<td>第1行,第2列</td>
</tr>
<tr>
<th rowspan="2">第2个表头单元格</th>
<td>第2行,第2列</td>
</tr>
<tr><td>第3行,第2列</td>
</tr>
<tr>
<th>第3个表头单元格</th>
<td>第4行,第2列</td>
</tr>
</table>

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

第二种:合并<td>标准单元格

1、跨列合并<td>标准单元格使用colspan属性

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

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

Markup
<table  border="1">
<tr>
<td colspan="2">td单元格</td>
<td>td单元格</td>
</tr>
<tr>
<td>td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
</table>

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

3、跨行合并<td>标准单元格使用rowspan属性

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

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

Markup
<table  border="1">
<tr>
<td rowspan="2">td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
<tr>
<td>td单元格</td>
<td>td单元格</td>
</tr>
</table>

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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容