web实战：装饰表格-白红宇

table标签在我们学习HTML的时候可能会经常用到，但开始做项目了后，原生table的使用反而减少了，因为大多UI框架都会对table进行包装美化，方便了我们的使用，但也使我们逐渐忘记了如何进行原生的修饰，今天通过一个小demo回顾温习下吧。

假设一个简单的需求：创建一个展示库存（inventory）的表格。那么，首先就是用HTML写好整个表格框架了。


    
         
              Table: Current Inventory    
                                                                                               Product                Price                Rating           
                         Vitae Quam Lorem                $19.95                4.5           
     
    
复制代码

Table: Current Inventory
Product	Price	Rating
Vitae Quam Lorem	$19.95	4.5

body {    width: 760px;    margin: 0 auto;    background-color: #FDFCD2;}.inventory{    font-family: "Trebuchet MS",Arial Helvetica,sans-serif;    width:100%;    margin-top: 25px;}复制代码

table的构建代码是不是很少，省略了一些代码，因为有些没有太大的作用，比如thead之类的，好像只是是改变table的渲染顺序而已。具体代码就不详讲了，个别的下面的修饰过程中会提及。

我们看看没有任何修饰时的表单：

是不是无法直视。接下来我们一步一步来修该。

首先从标题开始，标题放中间不好看，把它移动到最右边吧，然后和表格得有一定的间距，并且加粗加颜色让别人知道这货是个标题。

.inventory caption{    color: #797865;    text-align: right;    font-size: 1.5em;    margin-bottom: 10px;}复制代码

这里使用了em做单位，与基本字体大小成倍数关系，方便设置。

嗯，还是很丑，继续。

为了方便数据的查阅，我们为单元格添加边框，从视觉上把数据隔开。

.inventory td,.inventory th{    font-size: 1.1em;    border: 1px solid #DDB575;}复制代码

单元格间出现间隙，边框也重复了，我们要把间距去掉并把边框合并成一条，如果要在th，td上修改，那就比较麻烦，作用在table标签上的border-collapse样式属性就是专门解决这个问题的。单元格的数据有点拥挤，得添加一些内边距，并设置对齐方式如：

.inventory{    /*坍塌边框，去掉单元格空隙*/    border-collapse: collapse;}复制代码

.inventory td, .inventory th{    padding: 3px 7px;    cursor: pointer;    /*text-align可以继承*/    text-align: left;    /*vertical-align不能继承，所有要应用在td，th中*/    vertical-align: middle;}复制代码

是不是好多了，但表头信息和表格数据没有明显区分，容易混淆，而且一旦单元行数过多，用户很难区分数据属于哪一行，或者是自己读到哪一行了。因此，好的视觉指引极其重要。所以我们要突出表头，并且隔行设置不同的颜色，如奇偶数行，并在用户使用鼠标选中数据查看时，要高亮该行颜色进行指引。

/*突出表头*/.inventory th{    text-transform:uppercase;    padding-top: 5px;    padding-bottom: 5px;    /*兼容旧的浏览器，比如IE9之前*/    background: rgb(229,76,16);    background: linear-gradient(to bottom, rgb(229,76,16),rgb(173,54,8));    color:white;}/*突出关键列的数据*/.inventory tr td:last-of-type{    color: rgb(229,76,16);}复制代码

/*增加奇偶数行的颜色，方便用户对每行数据的识别*/.inventory tr:nth-of-type(odd){    /*选择透明色，防止覆盖数据*/    background-color: rgba(229,76,16,.1);}.inventory tr:nth-of-type(even){    background-color: rgba(225,255,255,.1);}/*标识选中的数据*/.inventory tr:hover{    background: rgba(238, 79, 17, 0.4);}复制代码

最后做个小修该，就是缩小后两列的列宽，让表格展示更加合理美观。

/*用列组的方式设置列宽，但只能使用两组属性width和背景属性（background-）*/#price,#rating{
        width: 15%;}复制代码

完成全部修改后：

本来我想比较少见的代码都提下，但好像能说的只是功能而已，搜索下就知道了，没有难度。需要注意的是vertical-align属性，它是比较常见的一个css属性，但也是很难的一个，一般作用于内联格式上下文（IFC）如inline或inline-block等属性的元素中，还有就是作用于table-cell属性的元素，如td，在td中，vertical-align：middle是垂直居中作用，但在inline-block中就不一定了，具体的推荐去看这篇文章：，但这篇文章篇幅较长而且难点多，建议有充足的时间再去阅读。

最后，源码祭上：。

参考：CSS实战手册（书籍，demo中的素材是从里面提取的，如颜色，名称等）