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

2023-12-28 19:52:17

表格在日常生活中使用的非常的多,比如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>

文章来源:https://blog.csdn.net/csgojingyu/article/details/135276204
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。