码迷,mamicode.com
首页 > 其他好文 > 详细

数据表格应该被完全抛弃吗?

时间:2014-11-28 07:40:01      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   strong   

  有人说,数据表格会使页面变的臃肿不堪,所以应该完全抛弃掉他们,但是,有的时候,表格的用处显然是极大的。HTML提供了许多表格的属性,以做一个日历为例,在这进行总结一下。

  1. summary和caption.caption指表格标题,summary类似于图片的ALT属性,用于描述表格的内容。
  2. thead、tbody和tfoot.三个标签可以将表格分成几个逻辑部分,以便于对某一个特殊区域运用特殊样式,一个表格中只可以使用一个thead和tfoot,而可以使用多个tbody。
  3. col和colgroup,我们知道,行标题和列标题可以用<th>标签进行表示,行标记可以用<tr>,所以可以通过<tr>对整行应用样式,但是很难对整列应用样式,这个时候col和colgroup就派上用处了!他们可以对一个或多个列进行定义和分组。

使用了以上的标签,我们可以先构建出日历的基本轮廓:

<!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>日历制作</title>
</head>
<body>
<table class="cal" summary="A calender">
    <caption>
        <a href="#" rel="prev">&lt;</a>November 2014<a href="#" rel="next">&gt;</a>
    </caption>
    <colgroup>
        <col id="sun"/>
        <col id="mon"/>
        <col id="tue"/>
        <col id="wed"/>
        <col id="thur"/>
        <col id="fri"/>
        <col id="sat"/>
    </colgroup>
<thead>
    <tr>
        <th scope="col">Sun</th>
        <th scope="col">Mon</th>
        <th scope="col">Tue</th>
        <th scope="col">Wed</th>
        <th scope="col">Tur</th>
        <th scope="col">Fri</th>
        <th scope="col">Sat</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="null">26</td>
        <td class="null">27</td>
        <td class="null">28</td>
        <td class="null">29</td>
        <td class="null">30</td>
        <td class="null">31</td>
        <td><a href="#">1</td>
    </tr>
    <tr>
        <td><a href="#">2</td>
        <td><a href="#">3</td>
        <td><a href="#">4</td>
        <td><a href="#">5</td>
        <td><a href="#">6</td>
        <td><a href="#">7</td>
        <td><a href="#">8</td>
    </tr>
    <tr>
        <td><a href="#">9</td>
        <td><a href="#">10</td>
        <td><a href="#">11</td>
        <td><a href="#">12</td>
        <td><a href="#">13</td>
        <td><a href="#">14</td>
        <td><a href="#">15</td>
    </tr>
    <tr>
        <td><a href="#">16</td>
        <td><a href="#">17</td>
        <td><a href="#">18</td>
        <td><a href="#">19</td>
        <td><a href="#">20</td>
        <td><a href="#">21</td>
        <td><a href="#">22</td>
    </tr>
    <tr>
        <td><a href="#">23</td>
        <td><a href="#">24</td>
        <td><a href="#">25</td>
        <td><a href="#">26</td>
        <td><a href="#">27</td>
        <td class="selected"><a href="#">28</td>
        <td><a href="#">29</td>
    </tr>
    <tr>
        <td><a href="#">30</td>
        <td class="null">1</td>
        <td class="null">2</td>
        <td class="null">3</td>
        <td class="null">4</td>
        <td class="null">5</td>
        <td class="null">6</td>
    </tr>
</tbody>
</table>
</body>
</html>

再对其设置样式,表格边框有两个模型,分别是单独的(border-collapse:separate)和叠加的(border-collapse:collapse)。

table.cal{
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    color: #333;
}
.cal th,.cal td{
    margin: 0;
    padding: 0; 
}
//对标题添加视觉样式
.cal caption{
    font-size: 1.25em;
    padding-top: 0.692em;
    padding-bottom: 0.692em;
    background-color: #d4dde6;
}
.cal caption [rel="prev"]{
    float: left;
    margin-left: 0.2em;
}
.cal caption [rel="next"]{
    float: right;
    margin-left: 0.2em;
}
.cal caption a:link,
.cal caption a:visited{
    text-decoration: none;
    color: #333;
    padding: 0 0.2em;
}
.cal caption a:hover,
.cal caption a:active,
.cal caption a:focus{
    background-color: #6d8ab7;
}

//对主体部分应用样式
.cal thead th{
    background-color: #d4dde6;
    border-bottom: 1px solid #a9bacb;
    font-size: 0.875em;
}
.cal tbody{
    color: #a4a4a4;
    text-shadow: 1px 1px 1px white;
    background-color: #d0d9e2;
}
.cal tbody td{
    border-top: 1px solid #e0e0e1;
    border-right: 1px solid #9f9fa1;
    border-bottom: 1px solid #acacad;
    border-left: 1px solid #dfdfe0;
}
.cal tbody a{
    display: block;
    text-decoration: none;
    color: #333;
    background-color: #c0c8d2;
    font-weight: bold;
    padding: 0.385em 0.692em 0.308em 0.692em;
}
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active,
.cal tbody .selected a:link,
.cal tbody .selected a:visited,
.cal tbody .selected a:hover,
.cal tbody .selected a:focus,
.cal tbody .selected a:active{
    background-color: #6d8ab7;
    color: white;
    text-shadow: 1px 1px 2px #22456b;
}
.cal tbody td:hover,
.cal tbody td.selected{
    border-top: 1px solid #2a3647;
    border-right: 1px solid #465977;
    border-bottom: 1px solid #576e92;
    border-left: 1px solid #466080;
}

这样一个漂亮的日历小组件就诞生了~~~注意作者加样式的过程和思路。

数据表格应该被完全抛弃吗?

标签:style   blog   http   io   ar   color   使用   sp   strong   

原文地址:http://www.cnblogs.com/fanyj/p/4127621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!