Html5-------合并单元格

一：

1、语法

跨行合并 rowspan = "合并单元格的个数“

跨列合并 colspan= "合并单元格的个数“

2、合并顺序

：先上后下、先左后右

3、合并三部曲

（1）先确定跨行还是跨列

（2）根据先上后下，先左后右的顺序找到目标单元格，然后写上合并方式以及合并的单元格数量

<td colspan="2"> //跨行合并，合并数量为3

（3）删除多余的单元格

二、案例

1、将下表个人简历的表格进行合并

此表格的代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>合并单元格</title>
</head>
<body>
<table align="center" width="500" cellspacing="0" border="1"><caption><h3>个人简历</h3></caption><tr><td>姓名：张三</td><td>性别：男</td><td>年龄：27</td><td>照片</td></tr><tr><td>身高：180cm</td><td>民族：汉</td><td>婚姻：未婚</td><td>照片</td></tr><tr><td>个人简历</td><td>个人简历</td><td>个人简历</td><td>个人简历</td></tr><tr><td>个人作品</td><td>个人作品</td><td>个人作品</td><td>个人作品</td></tr>
</table>
</body>
</html>

2、合并后的表格

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>合并单元格</title>
</head>
<body>
<table align="center" width="500" cellspacing="0" border="1"><caption><h3>个人简历</h3></caption><tr><td>姓名：张三</td><td>性别：男</td><td>年龄：27</td><td rowspan="2" >照片</td></tr><tr><td>身高：180cm</td><td>民族：汉</td><td>婚姻：未婚</td>
<!--        <td>照片</td>    删除此表格--></tr><tr><td>个人简历</td><td colspan="3">个人简历</td><!--        <td>个人作品</td>--><!--        <td>个人作品</td>--></tr><tr><td>个人作品</td><td colspan="3">个人作品</td>
<!--        <td>个人作品</td>-->
<!--        <td>个人作品</td>--></tr>
</table>
</body>
</html>

Html5-------合并单元格相关推荐

html5合并单元格边框线,table边框表头单元格空间合并等设置
表格由 :在标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 1 HTML 表格的基本结构:2 HT ...
html5合并单元格边框线,table边框表头单元格空间合并等设置，
table边框表头单元格空间合并等设置, 表格由标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 1 ...
HTML5合并单元格居中,excel表格合并后居中的方法步骤
Excel中具体该如何合并后进行合并呢?接下来是学习啦小编为大家带来的excel表格合并后居中的方法,供大家参考. excel表格合并后居中的方法合并居中步骤1:在"开始"功能区 ...
HTML5 合并单元格
<!doctype html> <html> <head> <meta charset="GB2312"> <title> ...
合并单元格两行_28 HTML5标签学习——table单元格的合并
成长是一辈子的事儿!大家好!我是时问新.分享前端.Python等技术,以及个人成长路上的那些事儿. 表格是可以进行单元格的合并的. 比如下图所示: 单元格A跨了两列,单元格E跨了两行.这就是单元格的合 ...
HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址转载请备注代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
HTML5+CSS3网页设计从基础到入门——合并单元格
一,合并单元格的方式跨行合并:rowspan＝"合并单元格的个数" 跨列合并:colspan＝"合并单元格的个数" ...
HTML5网页设计阶梯教程（5）——如何设置单元格背景与如何合并单元格
上一章我讲了如何创建表格和设置单元格的大小,这一章我讲一讲如何设置单元格背景与如何合并单元格. 老规矩,先上图: 这是设置表格背景的代码,只加了background标记,就可以轻轻松松的达到表格背景创 ...
html两个th合并单元格,10、HTML表格（table 、th、tr、td、合并单元格）的简单认识...
1.表格的定义表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列 ...
vue + xlsx 动态生成Excel，合并单元格
根据数据动态生成一个Excel导出文件,这个公共相对简单一些,引入 xlsx就可以了. 但是根据需求,动态合并单元格,貌似难度不小,这里需要对 xlsx的属性和方法有一定的了解才可以,那么一起学习一下 ...

Html5-------合并单元格

Html5-------合并单元格相关推荐

最新文章

热门文章