本文说明如何通过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)我们还可以为选中行添加渐变颜色,这样,当鼠标滑过某一行时,该行的颜色就会变化,方便查看表格。