CSS 表格 table

CSS - border 表格边框

设置最外层边框 :

table {border: 1px solid #000;}

设置单元格边框 :

table, th, td{border: 1px solid #000;}

以上实例的表格有双边框,因为th/ td元素有独立的边界。

合并表格边框 :

table{border-collapse:collapse;}
table, th, td{border: 1px solid #000;}

CSS - table 表格宽度和高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			table{
				width: 400px;   /** 设置表格宽 **/
				border-collapse:collapse; /** 合并边框 **/
			}
			table, th, td{border: 1px solid #000;}
			th, td{
				height: 40px;  /** 设置行高 **/
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>表头1</th>
				<th>表头2</th>
			</tr>
			<tr>
				<td>行1,列1</td>
				<td>行1,列2</td>
			</tr>
			<tr>
				<td>行2,列1</td>
				<td>行2,列2</td>
			</tr>
		</table>
	</body>
</html>

表格的表头(th)默认水平居中,垂直居中。th, td默认水平居左,垂直居中。

CSS - 文字对齐

th,td{ text-align: center;}

text-align表示水平对齐方式,值 :left(默认),center 居中,right 靠右。

CSS - 表格颜色

表头设置背景色:

th{
	background-color:#A9A9A9;
	color:#fff;
 }

鼠标移动到元素上:

tr:hover{
	background-color: #FAEBD7;
}

注:这里用到伪选择器 :hover

完整实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			table{
				width: 400px;   /** 设置表格宽 **/
				border-collapse:collapse; /** 合并边框 **/
			}
			table, th, td{border: 1px solid #000;}
			th, td{
				text-align: center; /** 水平居中 **/
				height: 40px;  /** 设置行高 **/
			}
			th{
				background-color:#A9A9A9;
				color:#fff;
			}
			tr:hover{
				background-color: #FAEBD7;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>表头1</th>
				<th>表头2</th>
			</tr>
			<tr>
				<td>行1,列1</td>
				<td>行1,列2</td>
			</tr>
			<tr>
				<td>行2,列1</td>
				<td>行2,列2</td>
			</tr>
			<tr>
				<td>行3,列1</td>
				<td>行3,列2</td>
			</tr>
		</table>
	</body>
</html>