当前位置： 首页 > CSS+DIV > 正文

CSS+DIV设计一款随鼠标指针隔行变色的表格

Dec032013
作者：欧阳   发布：2013-12-03 23:25   分类：CSS+DIV     抢沙发  

效果如下：

Member List
Name Class Birthday Constellation Mobile
isaac W13 Jun 24th Cancer 1118159
girlwing W210 Sep 16th Virgo 1307994
tastestory W15 Nov 29th Sagittarius 1095245

1、CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
<!--
.datalist{
    border:1px solid #0058a3;   /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;   /* 边框重叠 */
    background-color:#eaf5ff;   /* 表格背景色 */
    font-size:14px;
}
.datalist caption{
    padding-bottom:5px;
    font:bold 1.4em;
    text-align:left;
}
.datalist 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;
}
.datalist td{
    border:1px solid #0058a3;   /* 单元格边框 */
    text-align:left;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
}
.datalist tr:hover{
    background-color:#c4e4ff;   /* 动态变色 */
}
-->
</style>

2、body部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table class="datalist" summary="list of members in EE Studay">
    <caption>Member List</caption>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
    <tr>
        <td>isaac</td>
        <td>W13</td>
        <td>Jun 24th</td>
        <td>Cancer</td>
        <td>1118159</td>
    </tr>
    <tr>
        <td>girlwing</td>
        <td>W210</td>
        <td>Sep 16th</td>
        <td>Virgo</td>
        <td>1307994</td>
    </tr>
    <tr>
        <td>tastestory</td>
        <td>W15</td>
        <td>Nov 29th</td>
        <td>Sagittarius</td>
        <td>1095245</td>
    </tr>
</table>

知识点：

在<table>标记中除了使用了border属性勾勒出表格的边框外，还使用了summary属性。该项属性的值用于概括整个不合格的内容，在用浏览器浏览页面时，它的效果是不可见的，但对搜索引擎等则十分重要。

<caption>标记的作用跟它的名称一样，就是表格的大标题，该标记可以出现在<table>与</table>之间的任意位置，不过通常习惯放在表格的第1行，即紧接着<table>标记。设计者同样可以使用一个普通的行来显示表格的标题，但<caption>标记无论是对于好的编码习惯，还是搜索引擎而言，都是占有绝对优势的。

表格动态地根据鼠标来变色，主要是调用了<tr>标记的伪类别(Anchor Pseudo Classes)hover来实现动态的变色效果。

本文固定链接: http://www.ouchaoman.com/2013/12/03/css-change-table/ | 欧阳博客

该日志由 欧阳 于2013年12月03日发表在 CSS+DIV 分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: CSS+DIV设计一款随鼠标指针隔行变色的表格 | 欧阳博客
【上一篇】
【下一篇】

您可能还会对这些文章感兴趣！

CSS+DIV设计一款随鼠标指针隔行变色的表格：等您坐沙发呢！

发表评论

快捷键：Ctrl+Enter