本文介绍了HTML中如何实现表格的单元格合并，包括横向和纵向的合并，通过使用`colspan`和`rowspan`属性，可以轻松创建具有复杂布局的表格，提升网页展示效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>单元格合并等功能的实现</title>
</head>
<body>
<!--cellspacing="0"设置两个单元格之间的距离为0，使两个单元格相连 -->
<!-- <body text="#ffff00" link="blue" vlink="red">设置文本的颜色-->
<!-- -->
<!-- -->
<table border="1" cellspacing="0" cellpadding="10%">
<caption>原始表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr>
<td><big>jack</big></td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack1</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack2</td>
<td>212</td>
<td>12158412</td>
</tr>
<table border="1" cellspacing="0" width="50%" height="150">
<caption>
<b><font size="5pt" color="#0000ff">横向合并单元格</font> </b>
</caption>
<tr>
<th colspan="2"><font color="#00ff00" size="5pt">姓名和年龄</font></th>
<th>电话</th>
</tr>
<tr>
<td align="center">jack</td>
<td>22</td>
<td>12356451</td>
</tr>
<tr>
<td>tom</td>
<td>22</td>
<td>125414</td>
</tr>
<tr>
<td>xx</td>
<td>121</td>
<td>1245245</td>
</tr>
<table border="10" cellspacing="0" width="50%" height="150%">
<caption>
<b><font size="5pt" color="#0000ff">纵向合并单元格</font> </b>
</caption>
<tr>
<th align="center">班级</th>
<th align="center">姓名</th>
<th align="center">年龄</th>
<th align="center">电话</th>
</tr>
<tr>
<td rowspan="2">101班</td>
<td>jack</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack22</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td rowspan="2">102班</td>
<td>jack1</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack2</td>
<td>212</td>
<td>12158412</td>
</tr>
<a href="http://www.sina.com">新浪</a>
<br>
<img alt="图片" src="pics/1.jpg" width="100" height="300" align="top">
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>单元格合并等功能的实现</title>
</head>
<body>
<!--cellspacing="0"设置两个单元格之间的距离为0，使两个单元格相连 -->
<!-- <body text="#ffff00" link="blue" vlink="red">设置文本的颜色-->
<!-- -->
<!-- -->
<table border="1" cellspacing="0" cellpadding="10%">
<caption>原始表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr>
<td><big>jack</big></td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack1</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack2</td>
<td>212</td>
<td>12158412</td>
</tr>
</table>
<table border="1" cellspacing="0" width="50%" height="150">
<caption>
<b><font size="5pt" color="#0000ff">横向合并单元格</font> </b>
</caption>
<tr>
<th colspan="2"><font color="#00ff00" size="5pt">姓名和年龄</font></th>
<th>电话</th>
</tr>
<tr>
<td align="center">jack</td>
<td>22</td>
<td>12356451</td>
</tr>
<tr>
<td>tom</td>
<td>22</td>
<td>125414</td>
</tr>
<tr>
<td>xx</td>
<td>121</td>
<td>1245245</td>
</tr>
</table>
<table border="10" cellspacing="0" width="50%" height="150%">
<caption>
<b><font size="5pt" color="#0000ff">纵向合并单元格</font> </b>
</caption>
<tr>
<th align="center">班级</th>
<th align="center">姓名</th>
<th align="center">年龄</th>
<th align="center">电话</th>
</tr>
<tr>
<td rowspan="2">101班</td>
<td>jack</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack22</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td rowspan="2">102班</td>
<td>jack1</td>
<td>212</td>
<td>12158412</td>
</tr>
<tr>
<td>jack2</td>
<td>212</td>
<td>12158412</td>
</tr>
</table>
<a href="http://www.sina.com">新浪</a>
<br>
<img alt="图片" src="pics/1.jpg" width="100" height="300" align="top">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
