HTML中合并单元格(水平和垂直)
2021/6/11 18:21:00
本文主要是介绍HTML中合并单元格(水平和垂直),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
HTML中合并单元格(水平和垂直)
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <title>表格合并(水平和垂直方向)</title> </head> <base target="_self"> <body> <!--初始表格--> <table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px"> <tr> <td>北京</td> <td>上海</td> <td>广州</td> </tr> <tr> <td>深圳</td> <td>河北</td> <td>雄安</td> </tr> </table> <!--水平方向上的合并--> <br><br><br><br><br> <table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px"> <tr> <td colspan="2">北京</td> <!--第一个单元格与第二个单元格合并,colspan="2"意思是第一个单元格的长度改变成两个单元格的长度,也就是把第一个单元格长度边长两倍,第二个单元格的<td></td>删除。--> <td>广州</td> </tr> <tr> <td>深圳</td> <td>河北</td> <td>雄安</td> </tr> </table> <br><br><br><br><br> <table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px"> <tr> <td>北京</td> <td>上海</td> <td>广州</td> </tr> <tr> <td>深圳</td> <td colspan="2">河北</td> </tr> </table> <br><br><br><br><br> <!--垂直方向上的单元格合并--> <table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px"> <tr> <td rowspan="2">北京</td><!--第一个单元格垂直方向上合并,改变第一个单元格在垂直方向上的长度,变成原先的两倍,但是表格的高度和长度不变,所以要删除深圳所在的单元格(rowspan="2"意思是第一个单元格现在的长度等于原先两个单元格的长度)--> <td>上海</td> <td>广州</td> </tr> <tr> <td>广州</td> <td>雄安</td> </tr> </table> <br><br><br><br><br> <table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px"> <tr> <td>北京</td> <td>上海</td> <td rowspan="2">广州</td> </tr> <tr> <td>深圳</td> <td>河北</td> </tr> </table> </body> </html>
参考:http://blog.csdn.net/ameir_yang/article/details/60782259
这篇关于HTML中合并单元格(水平和垂直)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享