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

CSS3实例——表格相关推荐

《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:97871153634 ...
和css3实例教程_最好CSS和CSS3教程
和css3实例教程级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...
css斑马线表格,用CSS3美化表格
CSS3美化表格 *{margin: 0;padding: 0;} body { padding: 40px 100px; } .demo { width: 600px; margin: 40px a ...
html table隔行变色,使用CSS3实现表格隔行/隔列变色
废话少说,先看效果,如果不是你想要的,你可以撤了~ 这些都是css控制的,然后我们看下样式: table tr:nth-child(odd){background:#F4F4F4;} table td ...
CSS3实例教程:border-image属性实例讲解
一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...
html5行走的机器人,html5 css3实例教程一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
html5游戏角色行走,html5 css3实例教程一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
css3 之表格隔行分色显示
<html><head><title></title><style type="text/css">table{widt ...
php html5 案例,35个非常好的HTML5+CSS3实例
Apple.com的导航菜单,只使用了CSS3. 跨浏览器的按钮类. CSS和DIV的结合使用,圆角角度控制. CSS3的RGBa属性,透明度设置. 时尚的CSS3表单. 你需要知道的5个有用的CSS ...

CSS3实例——表格

CSS3实例——表格相关推荐

最新文章

热门文章