java初学者--html系列教程--表格的使用(三)-跨行与跨列

最新推荐文章于 2023-02-17 15:29:37 发布

小黑鸣

最新推荐文章于 2023-02-17 15:29:37 发布

阅读量1.9k

点赞数

分类专栏： html&html5 文章标签： html java初学者 web 布局

本文链接：https://blog.csdn.net/javalearnNet/article/details/28261873

版权

html&html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图如下：

代码解析：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
				<title>
						java初学者Table标签的使用（二）跨行与跨列
				</title>
		</head>
		<body>
				<p>下面看一个案例</p>	
				<p>这是一个简单的四行六列的表格</p>
				<table border="1" width="500px" height="300px;">
						<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
							<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
							<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
							<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
				</table>
				<p>看下面的表格与上面有什么变化</p>
				<table border="1" width="500px" height="300px;">
						<tr>
							<td colspan="6">这里跨了六列</td>	
						</tr>
						<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
							<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
							<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
				</table>
				<font color="red">解析：</font>我们可以看到下面的表格与上面的表格唯一的区别就是，下面的表格，第一行从四个单元格变成一个单元格<br/>
				好的，我们从代码上去分析，如何实现的。第一个<tr></tr>中只有一个<td></td>并且td标签中有一个属性colspan="6".colspan属性的意思就是夸跨列。<br/>
				很显然，这里跨了六列。
				<hr/>
				<p>同样看下面的一个例子</p>
					<table border="1" width="500px" height="300px;">
						<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
							<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
						<tr>
							<td rowspan="2" width="80px;">这里跨了两行</td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
						<tr>
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
							<td></td>	
						</tr>
				</table>
				<p><font color="red">解析：</font>与第一个例子不同：第三列的第一个<td></td>多了一个属性“ rowspan=“2” ”，最后一行少了一个<td></td></p>
				<p>rowspan的意思就是跨行，显然这里将第三行和第四行的第一个单元格合并了。这里是跨了2行。</p>
				<hr/>
				<p>这节就讲到这里了，有什么疑问，请加入我们qq技术交流群</p>
				<p>下节：Table高级标签的使用</p>
		</body>
</html>

原文地址：http://www.javalearn.net/thread-221-1-1.html