**********************************************************************************************
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 border="1px solid #aaa" 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 属性规定单元格之间的空间；