表格(table、tr、th、td、colspan、rowspan)

最新推荐文章于 2024-05-30 16:49:10 发布

不动声色的小蜗牛

最新推荐文章于 2024-05-30 16:49:10 发布

阅读量2.2k

点赞数

分类专栏： HTML 文章标签： html html5 css3

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107310295

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

表格一：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		table{
			width: 720px;/*设置表格水平宽度为720px*/
			margin: 0 auto;/*使表格水平居中*/
			border: 1px solid black;/*设置边框*/
			border-spacing: 0px;/*去掉table标签及其子类的标签之间的空隙*/
			border-collapse: collapse;/*去掉重合线*/
		}
		th,td{
			border: 1px solid black;
		}
		td{/*使元素水平垂直居中*/
			text-align: center;
			vertical-align: auto;
		}
		
		
	</style>
</head>
<body>
	
	<table>
		<tr>
			<th>姓名</th>
			<th>手机号</th>
			<th>家庭地址</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>182</td>
			<td>郑州</td>
		</tr>
		<tr>
			<td>Jim</td>
			<td>157</td>
			<td>北京</td>
		</tr>
	</table>
	
</body>

显示的效果就是：

姓名	手机号	家庭地址
Tom	182	郑州
Jim	157	北京

表格二：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		table{
			width: 720px;
			margin: 0 auto;
			border: 2px solid black;/*设置边框*/
			border-spacing: 0px;/*去掉table标签及其子类的标签之间的空隙*/
			border-collapse: collapse;/*去掉重合线*/
		}
		th,td{
			border: 2px solid black;
		}
		
		
	</style>
</head>
<body>
	
	<br /><br />
	
	<table>
		<tr>
			<!--列合并用colspan="合并的行数"-->
			<th colspan="9">2013年度图书销售统计</th>
		</tr>
		
		<tr>
			<!--列合并用rowspan="合并的列数"-->
			<td rowspan="2" style="text-align: center;">图书分类</td>
			<td colspan="2">一季度</td>
			
			<td colspan="2">二季度</td>
			
			<td colspan="2">三季度</td>
			
			<td colspan="2">四季度</td>
			
		</tr>
		
		<tr>
			<td>销售量</td>
			<td>销售额</td>
			<td>销售量</td>
			<td>销售额</td>
			<td>销售量</td>
			<td>销售额</td>
			<td>销售量</td>
			<td>销售额</td>
		</tr>
		
		<tr>
			<td style="text-align: center;">小说</td>
			<td>23521</td>
			<td>￥559,940.00</td>
			<td>18423</td>
			<td>￥44,841.00</td>
			<td>32125</td>
			<td>￥829,870.00</td>
			<td>25188</td>
			<td>￥586,564.00</td>
		</tr>
		<tr>
			<td style="text-align: center;">文艺</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td style="text-align: center;">励志/成功</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td style="text-align: center;">童书</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	
</body>
</html>

合并行，用rowspan=“合并的行数”；合并列，用colspan=“合并的列数”。

显示的效果：
在这里插入图片描述