对表格应用样式

参考自《精通CSS高级Web标准解决方案（第2版）》

1.待补充基础

1.1 <table>相关基础

summary属性

<legend>标签

<thead>、<tbody>、<tfoot>

border-collapse属性

border-spacing属性

1.2 投影、边框圆角等属性

<text-shadow>

<box-shadow>

<border-radius>

2.用表格做一个日历组件

效果

代码

        <table class="cal" summary="Table Demo">
            <caption>
                <a href="#" rel="prev">&lt;</a>January 2008 <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">Thu</th>
                    <th scope="col">Fri</th>
                    <th scope="col">Sat</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>30</td>
                    <td>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><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>
                <tr>
                    <td><a href="#">13</a></td>
                    <td><a href="#">14</a></td>
                    <td><a href="#">15</a></td>
                    <td><a href="#">16</a></td>
                    <td><a href="#">17</a></td>
                    <td><a href="#">18</a></td>
                    <td><a href="#">19</a></td>
                </tr>
                <tr>
                    <td><a href="#">20</a></td>
                    <td><a href="#">21</a></td>
                    <td><a href="#">22</a></td>
                    <td><a href="#">23</a></td>
                    <td><a href="#">24</a></td>
                    <td><a href="#">25</a></td>
                    <td><a href="#">26</a></td>
                </tr>
                <tr>
                    <td><a href="#">27</a></td>
                    <td><a href="#">28</a></td>
                    <td><a href="#">29</a></td>
                    <td><a href="#">30</a></td>
                    <td><a href="#">31</a></td>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>

        table.cal {
            width:100px;
            color:#333;
            border-collapse: separate;
            border-spacing: 0;
        }
        table.cal th,table.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 a[rel="prev"] {
            float: left;
            margin-left: 0.2em;
        }
        .cal caption a[rel="next"] {
            float: right;
            margin-right: 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:focus,
        .cal caption a:active {
            background-color: #6d8ab7;
        }
        .cal thead th {
            background-color: #d4dde6;
            border-bottom:1px solid #a9bacd;
            font-size: 0.875em;
        }
        .cal tbody {
            color:#a4a4a4;
            text-shadow: 1px 1px 1px white;
        }
        .cal tbody td {
            border-left:1px solid #dfdfe0;
            border-top:1px solid #e0e0e1;
            border-right:1px solid #9f9fa1;
            border-bottom: 1px solid #acacad;
        }
        .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 {
            background-color: #6d8ab7;
            color:white;
            text-shadow:1px 1px 2px #22456b;
        }