本文摘自PHP中文网,作者藏色散人,侵删。
html合并表格的方法:首先创建一个HTML示例文件;然后通过table创建表格;接着使用rowspan属性合并两行或更多行;最后使用colspan属性将两个或多个列合并为一个列即可。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑
HTML的表格及单元格合并
表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>HTML的表格</title>
</head>
<body>
<center><h1>员工信息表</h1></center>
<hr>
<!--表格,border= "1px" 表示设置表格边框为1像素-->
<table align= "center" border= "1px" height= "30%" width= "150px" >
<!--行-->
<!--align对齐方式-->
<tr align= "center" >
<!--单元格-->
<td>a1</td>
<td>a2</td>
<td>a3</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
</tr>
<tr align= "center" >
<td>c1</td>
<td>c2</td>
<td>c3</td>
</tr>
</table>
</body>
</html>
|

单元格合并
rowspan和colspan
1、如果要合并两行或更多行,则将使用rowspan属性。
2、如果要将两个或多个列合并为一个列,将使用colspan属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>表单元格合并</title>
</head>
<body>
<table align= "center" border= "1px" width= "50%" >
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<!--
1、row合并的时候,删除“下面的”单元格。
2、row合并的时候,对删除哪个没有要求。
-->
<td rowspan= "2" >b3c3</td>
</tr>
<tr>
<td colspan= "2" >c1c2</td>
</tr>
</table>
</body>
</html>
|

阅读剩余部分
相关阅读 >>
Html页面如何显示上标和下标
Html轮播图如何实现
Html的<frameset>标签有什么作用
Html怎么设置倾斜
Html中的label标签怎么设置高度?label标签的使用方法介绍
Html 超级链接详细讲解
父元素<a>标签的默认行为以及click事件之间的相互影响
Html是编程语言吗
Html页面点击下载文件的两种实现方法
Html的版本
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html如何合并表格