700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Web基础(从零开始)——HTML表格标签(合并单元格)

Web基础(从零开始)——HTML表格标签(合并单元格)

时间:2021-08-31 08:41:04

相关推荐

Web基础(从零开始)——HTML表格标签(合并单元格)

合并单元格方式:

1.跨行合并:rowspan="合并单元格的个数"

2.跨列合并:colspan="合并单元格的个数"

在目标单元格中写合并代码:

跨行合并:在最上侧单元格写合并代码

跨列合并:在最左侧单元格写合并代码

合并单元格三部曲:

1.确定是跨行合并还是跨列合并;

2.找到目标单元格,写上合并方式=合并单元格数量,例:<td rowspan="2"></td>;

3.删除多余的单元格。

举例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><table align="center" border="1" cellpadding="0" cellspacing="0" width="600" height="200"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body></html>

先建立一个3*3的单元格

(1)想要合并如图所示单元格

1.确定是跨列合并;

2.找到目标单元格为最左侧单元格,在最左侧单元格上写上合并代码

对应代码中为第一个单元格,在该标签中添加合并代码

<td colspan="2"></td>

3.删除多余单元格

该单元格为多余的,删除

效果:

完整代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><table align="center" border="1" cellpadding="0" cellspacing="0" width="600" height="200"><tr><td colspan="2"></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body></html>

(2)想要合并如图所示单元格

1.确定为跨列合并

2.找到目标单元格为最上侧单元格,在最上侧单元格上写上合并代码

对应代码中:

在该行代码中添加合并代码:

<td rowspan="2"></td>

3.删除多余单元格

实现效果:

完整代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><table align="center" border="1" cellpadding="0" cellspacing="0" width="600" height="200"><tr><td></td><td></td><td></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。