本文摘自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中新建表格怎么加背景
javascript今年25 岁了!
Html中的form标签有什么作用?Html form标签的用法解释
术语Html指的是什么
Html怎样在消息按钮上增加数量角标
分享查看页面源代码的四种方法
Html的meta标签应该如何使用
table标签的cellspacing属性有什么用?一篇文章让你了解cellspacing属性
Html页面跳转及参数传递问题
Html label标签的for属性有什么作用?关于label标签的for属性介绍
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html如何合并表格