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 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 属性规定单元格之间的空间;