HTML表

最新推荐文章于 2023-09-12 19:01:10 发布

：十点差三分

最新推荐文章于 2023-09-12 19:01:10 发布

阅读量145

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41083450/article/details/101379877

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过图书销售统计的例子来介绍表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				width: 30%;
				border: blue 1px solid;/*实心的，还可以是虚线等*/
				border-collapse: collapse;/*重叠的部分折叠：若边框为1px 结果本该为2px 折叠后便为1px*/
				border-spacing: 0px;
			}
			th{
				height: 50px;
				vertical-align: top;/*垂直贴上*/
				border: red 3px solid;
			}
			td{
				height: 60px;
				text-align: center;/*水平居中*/
				vertical-align: bottom;/*垂直贴下*/
				border: purple 5px solid;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th colspan="9">2013年度图书销售统计</th>
			</tr>
			<tr>
				<th rowspan="2">图书分类</th>
				<th colspan="2">一季度</th>
				<th colspan="2">二季度</th>
				<th colspan="2">三季度</th>
				<th colspan="2">四季度</th>
			</tr>
			<tr>
				<th>销售量</th>
				<th>销售额</th>
				<th>销售量</th>
				<th>销售额</th>
				<th>销售量</th>
				<th>销售额</th>
				<th>销售量</th>
				<th>销售额</th>
			</tr>
			<tr>
				<td>小说</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>
		</table>
	</body>
</html>

每一对

是一行每一对是一个表头单元格每一对是一个数据单元格 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190925185119831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDgzNDUw,size_16,color_FFFFFF,t_70) table是蓝色 th是红色 td是紫色可看出table颜色被覆盖，th是表头格，指 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190925185338498.png) td是数据格，指 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190925185744419.png) 合并行（列）单元格都是在要合并的第一个列单元（行）加属性rowspan（colspan）

：十点差三分

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表

通过图书销售统计的例子来介绍表<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> table{ width: 30%; border: blue 1px solid;/*实...
复制链接

扫一扫