对于长时间浏览大量表格数据的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据在设计网页时，行能动态地根据鼠标来变色，就会大大较少用户的疲劳感，也会使表格更易用，本例介绍了网站建设时鼠标经过时变色的表格。
【操作步骤】
第1步，新建文档，保存为index.html。构建网页基本结构。在本例中构建了一个8行4列的表格。
<table class="chart" summary="list of members in EE Studay">
<caption>
学生成绩一览表
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">数学</th>
<th scope="col">语文</th>
<th scope="col">外语</th>
</tr>
<tr>
<td>TOM</td>
<td>100</td>
<td>97</td>
<td>59</td>
</tr>
<tr>
<td>YOLANDA</td>
<td>76</td>
<td>77</td>
<td>89</td>
</tr>
<tr>
<td>JACK</td>
<td>85</td>
<td>97</td>
<td>66</td>
</tr>
<tr>
<td>LILY</td>
<td>66</td>
<td>87</td>
<td>76</td>
</tr>
<tr>
<td>JASSIC</td>
<td>88</td>
<td>89</td>
<td>96</td>
</tr>
<tr>
<td>PETTER</td>
<td>56</td>
<td>87</td>
<td>67</td>
</tr>
<tr>
<td>MING</td>
<td>77</td>
<td>88</td>
<td>83</td>
</tr></table>
此时在没有CSS样式设置时的显示结果如图6.62所示。
第2步，定义表格和表格标题样式。设计网页时，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式。
.chart {/*表格样式*/
border: 1px solid #0058a3; /*表格边框*/
font-family: Arial;
border-collapse: collapse; /*边框重叠*/
background-color: #eaf5ff; /*表格背景色*/
font-size: 14px;
}.chart caption {/*表格标题样式*/
padding-bottom: 5px;
font-size: 20px;
font-weight: bold;
text-align: center;}
以上代码中，首先设置了表格的样式和表格的边框，并对表格标题样式进行了定义。
第3步，定义表格的行名称样式和单元格样式。
.chart th {/*行名称样式*/
border: 1px solid #0058a3; /*行名称边框*/
background-color: #4bacff; /*行名称背景色*/
color: #FFFFFF; /*行名称颜色*/
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 12px;
padding-right: 12px;
text-align: center; /*水平对齐*/}
.chart td {/*单元格样式*/
border: 1px solid #0058a3; /*单元格边框*/
text-align: center; /*水平对齐*/
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;}
以上代码中，首先定义了<th>标签样式和<td>标签样式。可以看到，整个表格样式已经形成，最后只差实现动态变色。
第4步，实现动态变色。
.chart tr:hover { background-color: #CC9999; /*动态变色*/}
从以上代码可以看到，实现动态变色可以直接调用<tr>标签的伪类hover。
提示：在现代标准浏览器中支持<tr>标签的伪类，但是在IE浏览器中，只有在IE8以上版本才支持，所以要注意浏览器的兼容性。
当前文章标题：在网页设计中设计动态效果的表格
当前URL：http://www.lyjtt.cn/news/wzzz/3119.html
下一篇：如何在网页设计中设计音乐首页
