表格&长表格-CSDN博客

本文链接：https://blog.csdn.net/qq_51942661/article/details/117790749

此处保存的是我学习前端的笔记和一些日常练习，放在这里方便查看。成长之路难免会有错误，这时候才形象生动的体现那句经典名言：“失败是成功之母！” 哈哈哈哈...... 话不多说。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<style type="text/css">
			/* table 是一个块元素 */
			table{
				width: 300px;
				margin: 0 auto;
				border: 1px solid black;
				
				border-spacing: 0px;/* 设置边框间的距离 */
				
				/* 设置了边框合并，则border-spacing自动失效 */
				border-collapse: collapse;/*设置边框合并*/		
			}
			
			td{
				border: 1px solid black;
			}
			th{
				border: 1px solid black;
			}
			
			tr:nth-child(odd){/*隔行变色*/
				background-color: #008000;
			}
			tr:hover{/**/
				background-color: #7FFFD4;
			}
			/* 上面这俩 IE8 以下都不兼容 */
		</style>
		
	</head>
	<body>
		<table>
			<tr><!-- 行-->
				<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>
			<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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>长表格</title>
		<style type="text/css">
			td{
				width: 100px;
				height: 30px;
				border: 1px solid black;
				text-align: center;
			}
			table{
				border: 1px solid black;
				border-collapse: collapse;
				margin: 0 auto;
			}
			tbody > tr:hover{
				background-color: #FFFF00;
			}
			
		</style>
		
	</head>
	<body>
		<table>
			<!-- 作长表格时，需将表格分为三部分：表头、表格主体、表格底部 ==》thead 、tbody 、tfoot  -->
			<!-- 如果表跟格中没有写tbody 浏览器会自动在表格中添加tbody，并将所有tr 都放到tbody中
			 所以tr并不是table的子元素，而是tbody的子元素
			 通过  table > tr 无法选中行，需要通过tbody > tr    -->
			<thead>
				<tr>
					<th>日期</th>
					<th>收入</th>
					<th>支出</th>
					<th>合计</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>06.10</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>06.11</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
				<tr>
					<td>06.12</td>
					<td>500</td>
					<td>300</td>
					<td>200</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td></td>
					<td></td>
					<td>合计</td>
					<td>100000</td>
				</tr>
			</tfoot>
			
		</table>
	</body>
</html>