分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

HTML中合并单元格(水平和垂直)

发布时间:2023-09-06 01:44责任编辑:彭小芳关键词: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中合并单元格(水平和垂直)

原文地址:https://www.cnblogs.com/leilong/p/8524626.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved