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

  有人说,数据表格会使页面变的臃肿不堪,所以应该完全抛弃掉他们,但是,有的时候,表格的用处显然是极大的。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;

}

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

你可能感兴趣的:(表格)