CSS3实例——表格

本文说明如何通过HTML5和CSS3制作表格。以下是效果图：

一、HTML5：

<table>
    <thead>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>《数据库系统教程(第2版)》</td>
            <td>叶小平 汤庸 汤娜 潘明</td>
            <td>清华大学出版社</td>
        </tr>
        <tr>
            <td>《算法设计技巧与分析》</td>
            <td>[沙特] M.H.Alsuwaiyel</td>
            <td>电子工业出版社</td>
        </tr>
        <tr>
            <td>《计算机网络教程(第4版)》</td>
            <td>谢钧 谢希仁</td>
            <td>人民邮电出版社</td>
        </tr>
        <tr>
            <td>《操作系统教程》</td>
            <td>谢旭升 朱明华 张练兴 李宏伟</td>
            <td>机械工业出版社</td>
        </tr>
        <tr>
            <td>《马克思主义基本原理概论》</td>
            <td>本书编写组</td>
            <td>高等教育出版社</td>
        </tr>
        <tr>
            <td>《16/32位微机原理、汇编语言及接口技术教程》</td>
            <td>钱晓捷</td>
            <td>机械工业出版社</td>
        </tr>
        <tr>
            <td>《数学建模方法及其应用(第二版)</td>
            <td>韩中庚</td>
            <td>高等教育出版社</td>
        </tr>
    </tbody>
</table>

thead元素表示表格的头部；tbody元素表示表格的主体（tfoot表示表格的尾部）。tr用于创建表格中的一行。th元素用于创建标题单元格，一般默认以粗体，居中进行显示；td用于创建普通单元格。

二、CSS3：

以HTML5创建完表格后，表格设置连边框都没有，这显然不是我们想要看到的结果，我们需要用CSS3对表格进行装饰。

table {
    font-family: "华文新魏";
    font-size: 20px;
    border-collapse: collapse;            /* 合并表格边框 */
}

th, td {
    padding: 0.4em 1em;
    border: 1px solid #999999;
}

th {
    background-color: #555555;
    color: #ffffff;
}

tbody tr:nth-child(odd) {                  /* 奇数行的背景颜色 */
    background-color: #ffdebb;
}

tbody tr:hover {                            /* 选中行颜色变化 */
    background: linear-gradient(#ffffff, #999999);
}

th, td {
    padding: 0.4em 1em;
    border: 1px solid #999999;
}

th {
    background-color: #555555;
    color: #ffffff;
}

tbody tr:nth-child(odd) {
    background-color: #ffdebb;
}

tbody tr:hover {
    background: linear-gradient(#ffffff, #999999);
}

（1）为th和td设置边框和内边距。在此之前，我们应该通过border-collapse属性，合并相邻两个单元格的边框（否则单元格之间会有间隙）。
（2）为单元格设置背景颜色和字体颜色（如果需要的话），这里表格头部和主体的颜色不同。表格主体通过nth-child选择器选择奇数行（odd）（或者偶数行（even））进行着色，相间的颜色看起来比较美观。

（3）我们还可以为选中行添加渐变颜色，这样，当鼠标滑过某一行时，该行的颜色就会变化，方便查看表格。