TABLE 应用 CSS美化
**********************************************************************************************
1、编写如下网页
**********************************************************************************************
--------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS美化TABLE边框和鼠标经过特效</title>
<style type="text/css">
</style>
</head>
<body>
<center>
<table width="500">
<thead> <th>序号</th> <th>昵称</th> <th>性别</th> <th>出生年月</th> <th>专业</th> </thead>
<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 width="500" cellpadding="0" cellspacing="0"></table>
添加样式：
<style type="text/css">
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 属性规定单元格之间的空间；
