CSS中表格介绍，表格相关的样式以及长表格的使用

最新推荐文章于 2024-03-05 19:30:22 发布

燕穗子博客

最新推荐文章于 2024-03-05 19:30:22 发布

阅读量932

点赞数 3

分类专栏： CSS 文章标签： javascript vscode java 开发语言 css3

本文链接：https://blog.csdn.net/m0_64346035/article/details/124141264

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，在网页中也可以来创建出不同的表格

一：创建表格

在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

rowspan用来设置纵向的合并单元格

colspan横向的合并单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="1" width="40%" align="center">
				<td>A1</td>
				<td>A2</td>
				<td>A3</td>
				<td>a4</td>
			</tr>
			
			<tr>
				<td>B1</td>
				<td>B2</td>
				<td>B3</td>
				
	    	</tr>
	        <tr>
				<td>B1</td>
				<td>B2</td>
				<td>B3</td>
				
				<!-- rowspan用来设置纵向的合并单元格-->				
			</tr>
			<tr>
				<td>C1</td>
				<td>C2</td>
				<td>C3</td>
			</tr>
	        <tr>
			<!-- colspan横向的合并单元格-->
				<td colspan="4">D1</td>
			</tr>
			
		</table>
		
	</body>
</html>

二、设置表格样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">		
			  /*设置表格的宽度 */	
			table{
				width: 300px;
				/*居中*/
				margin: 0 auto;
				/*边框*/
				border:1px solid black;
				/*table和td边框之间默认有一个距离
				  通过border-spacing属性可以设置这个距离
				 */

	/* 需求一： 设置表格的边框，要单线边框 */
				/* 方法一 */
				/* border-spacing:0px ; */	
				/*
				方法二
				  border-collapse [kə'læps] 可以用来设置表格的边框合并
				  如果设置了边框合并，则border-spacing自动失效
			     */
				border-collapse:collapse;

	/*需求二：设置背景色样式*/
				   
				/* background-color: #bfa; */
			}
			
			/* 设置边框 */
			td , th{
				border: 1px solid black;
			}
			
	/* 需求三： 设置隔行变色*/
			 tr:nth-child(even){
				background-color: #bfa;
			}
			
	/*
		需求四： 鼠标移入到tr以后，改变颜色
		*/
			tr:hover{
				background-color: #ff0;
			}
	/* 需求五：调整td文字在表格中的位置 */
	        td{
				height: 50px;
				vertical-align: top;
				/* 可选值：top,bottom,middle */
				text-align: center;
				/* 可选值：left，center，bottom */
			}
			
			
		</style>
	</head>
	<body>
		<!--table是一个块元素-->	
		<table>
			<tr>
				<!--
					可以使用th标签来表示表头中的内容，
						它的用法和td一样，不同的是它会有一些默认效果
				-->
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>住址</th>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
		</table>
		
	</body>
</html>

三、长表格的使用

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签：

thead 表头

tbody 表格主体

tfoot 表格底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中

thead中的内容，永远会显示在表格的头部

tfoot中的内容，永远都会显示表格的底部

tbody中的内容，永远都会显示表格的中间

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行需要通过tbody > tr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table>
			<thead>
				<tr>
					<th>日期</th>
					<th>收入</th>
					<th>支出</th>
					<th>合计</th>
				</tr>
			</thead>
			
			<tfoot>
				<tr>
					<td></td>
					<td></td>
					<td>合计</td>
					<td>100</td>
				</tr>
			</tfoot>
			
			<tbody>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>10.24</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
			</tbody>
			
			
			
		</table>
		
	</body>
</html>

燕穗子博客

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中表格介绍，表格相关的样式以及长表格的使用

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，在网页中也可以来创建出不同的表格一：创建表格在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个tdrowspan用来设置纵向的合并单元格colspan横向的合并单元格<!DOCTYPE html><html&gt
复制链接

扫一扫