web实战：装饰表格

newbeehh
1,582 阅读4分钟

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

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

<table class="inventory">
    <caption>
        Table: Current Inventory
    </caption>
    <colgroup>
        <col id="product">
        <col id="price">
        <col id="rating">
    </colgroup>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td>Vitae Quam Lorem</td>
        <td>$19.95</td>
        <td>4.5</td>
    </tr>
</table>
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：字体度量、line-height 和 vertical-align，但这篇文章篇幅较长而且难点多，建议有充足的时间再去阅读。

最后，源码祭上：web实战：装饰表格。

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


avatar
文章
阅读
粉丝