CSS——读书笔记-07-表单&数据表格-1

第七章 对表单和数据表格应用样式-1

1.对数据表格应用样式

1》表格特有的元素

》》summary & caption

caption： 表格的标题

summary： 表格标签，用来描述表格的内容

<table class="cal" summary="A calendar style date picker">
    <caption>
         <a href="cal.php?month=dec08" rel="prev"><</a>January 2008
         <a href="cal.php?month=feb09" rel="next">></a>
    </caption>
</table>

》》thead & tbody & tfoot

行标题和列标题使用th而非td，表格标题可以设置值为row或col的scope属性，定义它们是行标题还是列标题。

<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>

》》col & colgroup

支持col和colgroup的浏览器并不多。

针对整列应用样式

<colgroup>
    <col id="sun" />
    <col id="mon" />
    <col id="tue" />
    <col id="wed" />
    <col id="tur" />
    <col id="fri" />
    <col id="sat" />
</colgroup>

2》数据表格标记

日历

<table class="cal" summary="A calendar style date picker">
    <caption>
         <a href="cal.php?month=dec08" rel="prev"><</a>January 2008
         <a href="cal.php?month=feb09" rel="next">></a>
    </caption>
    <colgroup>
        <col id="sun" />
        <col id="mon" />
        <col id="tue" />
        <col id="wed" />
        <col id="tur" />
        <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">30</td>
            <td class="null">31</td>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
        </tr>
        <tr>
            <td><a href="#">6</a></td>
            <td><a href="#">7</a></td>
            <td class="selected"><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">10</a></td>
            <td><a href="#">11</a></td>
            <td><a href="#">12</a></td>
        </tr>
    </tbody>
</table>

3》对表格应用样式

table.cal {
    border-collapse: sepearte;
    border-spacing: 0;
    text-align: center;
    color: #333;
}

.cal th, .cal td {
    margin: 0;
    padding: 0;
}

注：

CSS规范中有两个表格边盒模型：单独的和叠加的。border-collapse

在单独模型中，各个单元格周围都有边框；collapse

在叠加模型中，单元格共享边框。separate

大多数浏览器默认采用单独模型。

4》添加视觉样式

.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 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;