本文摘自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阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解
Html怎么在文本中保留空格
Html如何让字体自动变色
学Html有什么用
vue框架是什么
Html和js实现简单的计算器
Html与xHtml和xml有什么区别
图解Html之文档结构
Html是语言么
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html如何合并表格