TABLE 应用 CSS美化

**********************************************************************************************

1、编写如下网页

**********************************************************************************************

--------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS美化TABLE边框和鼠标经过特效</title>

</style>

</head>

<body>

<tbody>

<tr> <td>1</td> <td>aaa</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>2</td> <td>bbb</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>3</td> <td>ccc</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>4</td> <td>ddd</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>5</td> <td>eee</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>6</td> <td>fff</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>7</td> <td>ggg</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>8</td> <td>hhh</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>9</td> <td>iii</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

<tr> <td>10</td> <td>jjj</td> <td>famale</td> <td>1990-10</td> <td>Computer</td> </tr>

</tbody>

</table>

</center>

</body>

</html>

--------------------------------------------------------------------------------------------

显示效果如下所示：

序号	姓名	性别	出生年月	专业
1	aaa	famale	1990-10	Computer
2	bbb	famale	1990-10	Computer
3	ccc	famale	1990-10	Computer
4	ddd	famale	1990-10	Computer
5	eee	famale	1990-10	Computer
6	fff	famale	1990-10	Computer
7	ggg	famale	1990-10	Computer
8	hhh	famale	1990-10	Computer
9	iii	famale	1990-10	Computer
10	jjj	famale	1990-10	Computer

table的边框显示都很不尽人意，这样会导致用户体验很差，所以下面对其进行美化。

**********************************************************************************************

二、table边框的CSS样式

**********************************************************************************************

1、添加CSS样式如下：

【第一种方法】

将上面的HTML代码中的table标签的属性改为：

添加样式：

table{ line-height:25px;}

th{ border:1px solid #aaa}

td{ text-align:center;border:1px solid #aaa}

tr:hover{ background-color:#FF9}

</style>

显示效果如下：

序号	姓名	性别	出生年月	专业
1	aaa	famale	1990-10	Computer
2	bbb	famale	1990-10	Computer
3	ccc	famale	1990-10	Computer
4	ddd	famale	1990-10	Computer
5	eee	famale	1990-10	Computer
6	fff	famale	1990-10	Computer
7	ggg	famale	1990-10	Computer
8	hhh	famale	1990-10	Computer
9	iii	famale	1990-10	Computer
10	jjj	famale	1990-10	Computer

【第二种方法】

将上面的HTML代码中的table标签的属性改为：

<table width="500" cellpadding="0" cellspacing="1"></table>

添加样式：

<style type="text/css">

table{ background-color:#aaa; line-height:25px;}

th{ background-color:#fff;}

td{ background-color:#fff; text-align:center}

</style>

显示效果如下：

序号	姓名	性别	出生年月	专业
1	aaa	famale	1990-10	Computer
2	bbb	famale	1990-10	Computer
3	ccc	famale	1990-10	Computer
4	ddd	famale	1990-10	Computer
5	eee	famale	1990-10	Computer
6	fff	famale	1990-10	Computer
7	ggg	famale	1990-10	Computer
8	hhh	famale	1990-10	Computer
9	iii	famale	1990-10	Computer
10	jjj	famale	1990-10	Computer

说明：

1. TABLE的的背景色为灰色[#aaa]，将td的背景色设置为白色[#fff]，再设置cellspacing的数值为1，则cellspacing的距离充当了table的分隔线,因此table的背景色和table的边框为同一个颜色。

2. cellpadding 属性规定单元边沿与其内容之间的空白； cellspacing 属性规定单元格之间的空间；