table 表格单元格横向与纵向合并
分类：实例代码
table 表格单元格横向与纵向合并属于前端实例代码，有关更多实例代码大家可以查看。
利用单元格可以能够有效的组织数据，对于组织清晰明了的数据有着重要意义。
下面是一段表格布局的代码实例，实现横向和纵向的单元格合并效果。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
html,body{
padding:10px;
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
table{
border:1px solid #ccc;
}
td{
width:100px;
height:100px;
text-align:center;
font-family:arial;
border:1px solid #aaa;
vertical-align:center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td></td>
<td rowspan='2'></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
关键是利用了rowspan和colspan属性。
table 表格单元格横向与纵向合并，这样的场景在实际项目中还是用的比较多的，关于table 表格单元格横向与纵向合并就介绍到这了。