css学习之table

最新推荐文章于 2022-03-14 14:41:31 发布

何东狮吼

最新推荐文章于 2022-03-14 14:41:31 发布

阅读量552

点赞数

分类专栏： css 文章标签： table css class float null sun

本文链接：https://blog.csdn.net/hedong37518585/article/details/6629150

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style type="text/css">
table.cal{
	border-collapse:separate;
	border-spacing:0;
	text-align:center;
	color:#333;
}
.cal th, .cal td{
	margin:0;
	padding:0;
}
.cal caption{
	font-size:16px;
	padding-top:10px;
	padding-bottom:10px;
	background:#CCC;
}
.cal caption a[rel=prev]{
	float:left;
	margin-left:5px;
}
.cal caption a[rel=next]{
	float:right;
	margin-right:5px;
}
.cal caption a:link,
.cal caption a:visited{
	text-decoration:none;
	color:#666;
	padding:0 5px;
}
.cal caption a:hover,
.cal caption a:active,
.cal caption a:focus{
	background:white;
}
.cal thead th{
	background:#EAEAEA;
	border-bottom:1px solid #666;
	font-size:10px;
}
.cal tbody{
	color:#003366;
	text-shadow:1px 1px 1px white;
	background:#CCC;
}
.cal tbody td{
	border-top:1px solid #e0e0e1;
	border-right:1px solid #9f9fa1;
	border-bottom:1px solid #acacad;
	border-left:1px solid #dfdfe0;
}
.cal tbody a{
	display:block;
	text-decoration:none;
	color:#333;
	background:#c0c8d2;
	font-weight:bold;
	padding:2px 5px 3px 5px;
}
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active{
	background:#6d8ab7;
	color:white;
	text-shadow:1px 1px 1px #22456b;
}
.cal tbody td:hover{
	border-top:1px solid #2a3647;
	border-right:1px solid #465977;
	border-bottom:1px solid #576e92;
	border-left:1px solid #466080;
}
.cal tbody td.null:hover{
	border-top:1px solid #e0e0e1;
	border-right:1px solid #9f9fa1;
	border-bottom:1px solid #acacad;
	border-left:1px solid #dfdfe0;
}
</style>
</head>

<body>
<table cellspacing="0" class="cal" summary="这是一个表格">
<caption>
	<a href="#" rel="prev"><</a> 2010 7月 <a href="#" rel="next">></a>
</caption>
<colgrounp>
	<col id="sun" />
	<col id="mon" />
	<col id="tue" />
	<col id="wed" />
	<col id="thur" />
	<col id="fri" />
	<col id="sat" />
</colgrounp>
<thead>
	<tr>
		<th scope="col">sun</th>
		<th scope="col">mon</th>
		<th scope="col">tue</th>
		<th scope="col">wed</th>
		<th scope="col">thur</th>
		<th scope="col">fri</th>
		<th scope="col">sat</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td class="null">30</td>
		<td class="null">31</td>
		<td><a href="#">1</a></td>
		<td><a href="#">2</a></td>
		<td><a href="#">3</a></td>
		<td><a href="#">4</a></td>
		<td><a href="#">5</a></td>
	</tr>
	<tr>
		<td><a href="#">6</a></td>
		<td><a href="#">7</a></td>
		<td><a href="#">8</a></td>
		<td><a href="#">9</a></td>
		<td><a href="#">10</a></td>
		<td><a href="#">11</a></td>
		<td><a href="#">12</a></td>
	</tr>
</tbody>
</table>
</body>
</html>

summary描述

caption标题

colground和col可以用ID对列进行样式修改，而一般情况下我们只能通过tr对行进行样式修改

thead和tbody还有tfoot，可以划分表格，如果使用了thead和tfoot那么必须要有一个以上的tbody，thead和tfoot只能各使用一次，tbody可以出现多次以划分不同部分
行标题、列标题应该用th而不是td，但如果标题即是标题又是数据部分那还得用td，scope="col"代表定位为行标题(row)还是列标题(col)