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;