字号: - o +

用CSS3来美化你的表格

2013-04-11 前端开发 10人评论 33,003次浏览   

子曰:和你一同笑过的人,你可能把他忘掉;但是和你一同哭过的人,你却永远不忘 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

分享一些比较老的东西,可能大家以前都已经用过了(此文章为翻译文章)

今天,我要告诉你如何使用一些巧妙的CSS3属性来美化你的表。有了这么多新的选择器,我们可以解决特定的表单元格和行不添加类标记,以创造一种独特的风格。我们将运用-webkit-moz 来实现一个没有图像的外观,并学习如何将内容转换成一个特定的类的元素。

pimptables

让我们开始markup吧。

标记

以下是我们的基本表的结构:

<table>
    <thead>
        <tr>
            <th></th>
            <th scope="col" abbr="Starter">Smart Starter</th>
            <th scope="col" abbr="Medium">Smart Medium</th>
            <th scope="col" abbr="Business">Smart Business</th>
            <th scope="col" abbr="Deluxe">Smart Deluxe</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="row">Price per month</th>
            <td>$ 2.90</td>
            <td>$ 5.90</td>
            <td>$ 9.90</td>
            <td>$ 14.90</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Storage Space</th>
            <td>512 MB</td>
            <td>1 GB</td>
            <td>2 GB</td>
            <td>4 GB</td>
        </tr>
        <tr>
            <th scope="row">Bandwidth</th>
            <td>50 GB</td>
            <td>100 GB</td>
            <td>150 GB</td>
            <td>Unlimited</td>
        </tr>
        <tr>
            <th scope="row">MySQL Databases</th>
            <td>Unlimited</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
        </tr>
        <tr>
            <th scope="row">Setup</th>
            <td>19.90 $</td>
            <td>12.90 $</td>
            <td>free</td>
            <td>free</td>
        </tr>
        <tr>
            <th scope="row">PHP 5</th>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
        </tr>
        <tr>
            <th scope="row">Ruby on Rails</th>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
        </tr>
    </tbody>
</table>

我们有一个表的需求,header,body和footer的所有元素。今天,我们将使用一个主机方案比较表为例。以下三种样式可以应用到这个表中,通过改变table1 or table2的类。

CSS Table 1

table1

第一个表中,将为描述性的单元格设置绿色色调,“th”的元素的一些梯度。让我们开始给表添加一些样式:

table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}

我们希望表格单元格之间有一定的空间,所以我们用border-collapse将边境分开。

我通常采取从Typechart的字体,漂亮的字体的例子和CSS代码准备复制一个真正有用的网站风格。

th元素的头部,将有以下样式:

.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

我们使用渐变属性的Firefox和WebKit浏览器(Safari和Chrome),以创造一个美好的三种颜色梯度。边界半径属性回合的左上角和右上角的细胞边界。

现在,我们需要照顾的是空的单元格。用CSS3选择器,我们可以做一些不可思议的事情,这就是其中之一:我们该怎么选择那些空的单元格呢:

.table1 thead th:empty{
    background:transparent;
    border:none;
}

页脚表将有以下样式:

.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}

没有什么特别之处,只是一些文字阴影,增强了字体。

内表将有一个浅绿色的背景和白色文字阴影刻效应:

.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

我们还添加了一些非常微妙的边界和边界半径的效果。这将调用一个轻微的发光效果。我们还可以使用一些框中阴影创建一个类似的效果。

现在,我们要添加一个图标,有一个跨度的“检查”类的所有单元格。用下面的CSS可以实现这一点:

.table1 tbody span.check::before{
    content : url(../images/check0.png)
}

此属性允许我们添加一些特定的内容(在这种情况下,它是一种图像)内的元素。我们也可以在这里添加一些文字。我们可以说“::之前”或“::后”,将它插入后的内容。

以上是第一个表的所有样式!让我们来看看第二个表吧。

CSS Table 2

table2

第二个表将会更加的优雅型,采用了黑色的页眉和页脚。

此表将不会有任何单元格之间的空间,所以我们将它折叠:

table.table2{
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    border-collapse:collapse;
    text-align:center;
}

footer和header将有类似的风格,所以,我们可以定义共同属性,如下所示:

.table2 thead th, .table2 tfoot td{
    padding:20px 10px 40px 10px;
    color:#fff;
    font-size: 26px;
    background-color:#222;
    font-weight:normal;
    border-right:1px dotted #666;
    border-top:3px solid #666;
    -moz-box-shadow:0px -1px 4px #000;
    -webkit-box-shadow:0px -1px 4px #000;
    box-shadow:0px -1px 4px #000;
    text-shadow:0px 0px 1px #fff;
    text-shadow:1px 1px 1px #000;
}

footer的样式:

.table2 tfoot th{
    padding:10px;
    font-size:18px;
    text-transform:uppercase;
    color:#888;
}

footer,我们已经一起定义标题单元格,将需要一个不同的方块阴影。header,阴影点的顶部和页脚应指向下方。我们也想改变颜色的文字:

.table2 tfoot td{
    font-size:36px;
    color:#EF870E;
    border-top:none;
    border-bottom:3px solid #666;
    -moz-box-shadow:0px 1px 4px #000;
    -webkit-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}

让我们回到我们仍然需要定义空单元格不应该有任何的风格的header部分:

.table2 thead th:empty{
    background:transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

我们还需要删除阴影框,我们还需要定义header最后一个边界boder-right

.table2 thead :nth-last-child(1){
    border-right:none;
}

去掉最前面和最后面的边框:

.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
    border:none;
}

现在让我们添加样式:

.table2 tbody th{
    text-align:right;
    padding:10px;
    color:#333;
    text-shadow:1px 1px 1px #ccc;
    background-color:#f9f9f9;
}

.table2 tbody td{
    padding:10px;
    background-color:#f0f0f0;
    border-right:1px dotted #999;
    text-shadow:-1px 1px 1px #fff;
    text-transform:uppercase;
    color:#333;
}

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论9条 ,博主回复1

  1. 到是很少用表格。。。

    公子 05-01 19:21 回复
  2. 一直倾向于div实现表格,但有时候却很无奈,为了兼容浏览器只能使用table

    小鬼哥04-17 21:30 回复
  3. 这个做主机站的时候可以用到~~

    麦子花开04-16 12:42 回复
  4. 这表格设计的是真不错 就是太烦那个 tr td啥的 太费劲!

    所谓刚子04-14 19:45 回复
  5. 专业的有jqgrid

    大发04-14 13:18 回复
  6. 帅哥,能不能把你这个博客的主题借给我用用啊?

    王羲之04-13 23:55 回复
  7. 看不懂,不过还是踩下

  8. 表格整一整,变得很好看了

    OYOY04-12 18:12 回复
  9. 你是不是知道我这两天正在做table啊。。 不过我就用的bootstrap自带的,很简洁

    游手好弦04-12 08:35 回复
    • 额。。。这个就是昨天看的英文文章,觉得还好,就翻译过来了

发表我的评论

*

*

取消