十个漂亮易用的 CSS 表格设计

表格 Table 可以说是网页中最难装饰打扮的对象之一,主要是因为 CSS 标记语言本身晦涩难懂、需要考虑的细节又极其多、还经常遇到在不同浏览器上的兼容性问题。就算是个很简单的表格也可能需要花费很多时间。这篇文章就是为了介绍十种很容易部署的表格 CSS 样式设计。

英文原文的作者是 R. Christie,访问原文或者需要就表格样式问题向作者提问,请点击这里。可以查看效果展示,或者下载源文件

写在最前的话

我们从 valid xhtml 1.0 strict 标记开始。下面是一个有效表格标记的样例:

<!-- Table markup 表格标记语言 -->

<table id="...">

    <!-- Table header 表格题头栏 -->
 
    <thead>
        <tr>
            <th scope="col" id="...">...</th>
            ...
        </tr>
    </thead>
 
 <!-- Table footer 表格脚注栏 -->
 
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
 
 <!-- Table body 表格主体 -->
 
    <tbody>
       <tr>
           <td>...</td>
           ...
       </tr>
       ...
    </tbody>

</table>

关于 xhtml 表格标记语言,可以阅读 W3School 上的 CSS 表格。本文中所用到的表格样式均在 Mozilla Firefox 3、IE 6 和 7、Opera 9.x 和 Safari 及以上版本浏览器测试通过。示例中的表格采用了淡蓝色色彩设计,是为了与网站风格一致,可以在文章结尾提供的源代码文件包中有针对性的修改以符合各种偏好。

开始之前,我们先来回顾一下设计表格样式的一般原则:

  1. 表格喜欢大空间。根据内容小心设计表格的宽度。如果不知道完美的宽度是多少,那就直接将 table 的 width 设置为 100%,也就是全宽。当表格内容不那么拥挤的时候看起来更漂亮,所以宽了总比窄了好。
  2. 单元格需要留白(padding)。每个单元格(Cell)都与别的单元格相邻且有联系,但是单元格之间必须要有清晰的间隔才更容易阅读也更好看。
  3. 像对待内容一样对待表格。人们阅读表格与阅读文字是相似的 —— 只是阅读表格更难而且需要更多时间。所以尽量控制表格的对比度。使用清淡的色彩 —— 这样对眼睛更友好。千万不要将表格设计得像图片装饰一样。确保所采用的样式能够使内容的可读性更强而不是相反。

下面再来看看这里要推荐的几个 CSS 表格样式设计吧。

1. 水平简约设计

水平表格指通常是一行行来阅读的表格。每行代表一个条目。可以采取最简约的方式来显示这类表格。只需要给单元格(cell,包括 tdth)设置足够的留空(padding)就可以了,然后在顶部的标题行下面设置一个 2 像素(px)宽的边框(border)。

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie

因为水平表格通常是从水平方向上浏览的,清除表格的边框有利于提高效率(阅读和展示两方面)。但是如果表格有很多行的话,没有边框会使得这种表格实际很难阅读。为了解决这个问题,我们在所有的 td 元素下面使用 1px 的边框:

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie

其中 tr:hover 规则非常有用,可以帮助人们准确区分简约设计的表格中的行。当鼠标指针悬停或经过一个单元格(cell)的时候,同一行的所有单元格都会以同样的背景色强调显示,使得行数比较多的时候很容易定位某一行。

重要!
仔细微调版面设计和单元格之间的留白
优点
易于定义样式,对简单的表格非常友好
缺点
tr:hover 规则在 IE 6 下不能正常工作,如果行数较多则会使得表格难以阅读
可以调整的特性
颜色、排版、tr:hover 效果

2. 竖式简约设计

虽然竖式设计很少使用,但是对于分类或者比较这一类功能来说还是非常有效的。此时每一列代表一个项目。我们可以在列与列之间增加空白来实现简约设计。

Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life

使用大的 border-left(左边框)和 border-right(右边框)以及同样的背景色。还可以使用透明边框,但是 IE 6 还是不支持。(为什么现在还有那么多人使用 IE 6 啊!)因为这种表格通常是从上往下读的,使用 tr:hover 属性不但没有好处反而会使表格难以阅读。如果非要使用类似特性的话,也许可以考虑基于 Javascript 的处理方式:当出现一个 mouseover 事件的时候改变整列的背景色。但这里不讨论 Javascript 的内容。

重要!
仔细调整排版设计和单元格之间的留白,不要使用 tr:hover 效果
优点
易于设计样式规则,对简单表格友好
缺点
如果背景不是整块的单色调就很难使用,只适用于某些表格
可以调整的特性
颜色设计和排版

3. 盒式表格

The most dependable of all styles, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by defining border as a separator. An example of a box style table is the following table:

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life

This style is nowadays probably the most used style. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.

Important!
Choose a color scheme that matches with your site
Pros
Easy to style, flexible for large or small tables
Cons
Choosing the perfect color scheme could be tricky
Play with
Colors and borders, use dashed or dotted to achieve cute effects, typography, icons

4. Horizontal Zebra

Zebra-tables are pretty attractive and usable. The alternating background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).

  1. <trclass=“odd”>
  2. <td></td>
  3. </tr>
  4. <tr>
  5. <td></td>
  6. </tr>
Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Important!
Do not put too much contrast on the zebra colors, you can blind your users
Pros
The zebra pattern can help people to scan the table
Cons
Adding class="odd" manually can be very tedious for large tables, many content management systems do not provide even/odd features on a table loop, hence picking the color scheme may be tricky
Play With
Contrasting color, borders, typography, icons

5. Vertical Zebra Style

Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. However, the markup becomes a little bit heavier:

  1. <table>
  2. <!– Colgroup –>
  3. <colgroup>
  4. <colclass=“vzebra-odd”>
  5. <colclass=“vzebra-even”>
  6. <colclass=“vzebra-odd”>
  7. <colclass=“vzebra-even”>
  8. </colgroup>
  9. <!– Table header –>
  10. <thead>
  11. <tr>
  12. <thscope=“col”id=“vzebra-comedy”>Employee</th>
  13. </tr>
  14. </thead>
  15. </table>

The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously applying class for the first td or th element, we can use a more convenient colgroup-tag. For more information about colgroup visit this page.

Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life

Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any other kind of tables.

Important!
Do not put too much contrast on the zebra colors, you can blind your viewer
Pros
Suitable for all types of tables
Cons
Choosing the color scheme could be tricky, need to add colgroup elements
Play With
Contrasting color, borders, colgroup and col, icons and typography

6. One Column Emphasis

In some tables, some particular column may have a higher weight than the other columns. If that’s the case, you can use colgroup and col to make that particular column stand out. In the example below, the first column serves as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

You can also use one-column-emphasis-technique to highlight something important, say the column containing totals of an accounting table, or in a comparison table — for computer specification perhaps, the winning entity (column).

Important!
Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.
Pros
Very effective when used in certain kind of tables
Cons
The necessary tr:hover effect does not work in IE, suitable for certain types of tables only
Play with
Color scheme, typography, icons and tr:hover effects

7. Newspaper

To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. A quick, minimalistic newspaper style can look like this:

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives are presented below:

Company Q1 Q2 Q3 Q4
The above data were fictional and made up, please do not sue me
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
Favorite Great Nice Bad
Passion of the Christ Bourne Ultimatum Shoot ‘Em Up Ali
The Big Fish The Mummy Apocalypto Monster
Shawshank Redemption Cold Mountain Indiana Jones Dead or Alive
Greatest Story Ever Told I Am Legend Star Wars Saw 3
Important!
Be careful with border-collapse, do not lose the signature border around the table!
Pros
Gives a royal, authorative aura to a table
Cons
Unsuitable for large tables (it loses it’s charm on large tables)
Play With
Typography, color scheme, background, border, padding, and tr:hover effects

8. Rounded Corner

Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up Photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td-elements to place the left and right corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:

Company Q1 Q2 Q3 Q4
The above data were fictional and made up, please do not sue me
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
Pros
Great if you want untraditional table, probably the only viable option you have if your website uses rounded corners heavily
Cons
Takes longer to style, requires images
Play With
Color scheme, corner variations, typography, tr:hover effects, icons

9. Table Background

If you are looking for a quick and unique way to style your table, simply pick an attractive image or photo related to the subject of your table and set it to be the background-image of the table. You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6:

  1. * html table tbody td
  2. {
  3. /* IE CSS Filter Hack goes here*/
  4. }

The table would look like this:

Employee Division Suggestions
IE 6 users won’t see the transparent background if the hack is not applied
Stephen C. Cox Marketing Make discount offers
Josephin Tan Advertising Give bonuses
Joyce Ming Marketing New designs
James A. Pentel Marketing Better Packaging
Important!
Make sure the image is relevant to the table’s contents
Pros
Very easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives outstanding impression on the viewer
Cons
Needs hack to get the background work in IE 6, needs images
Play With
Background images, transparent PNGs, typography, colors, icons

10. Cell Background

You can apply background-image to the cells and achieve a consistent look. Say you have at least half an hour to spare and you want something that’s not too bland. Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells. You’ll end up with a gradient style table:

Employee Division Suggestions Rating
Give background color to the table cells to achieve seamless transition
Stephen C. Cox Marketing Make discount offers 3/10
Josephin Tan Advertising Give bonuses 5/10
Joyce Ming Marketing New designs 8/10
James A. Pentel Marketing Better Packaging 8/10

Similarly, pick a pattern and set it as background-image and you’ll end up with a pattern-styled-table:

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Nation Capital Language Unique
Japan Tokyo Japanese Karate
South Korea Seoul Korean Ginseng
China Beijing Mandarin Kung-Fu
Indonesia Jakarta Indonesian Batik
Important!
Make sure the text stands out against the background
Pros
Easy to style, not too bland
Cons
Uses images, patterns and gradients might distract reading
Play With
Color scheme, patterns, typography, borders, backgrounds, gradients, icons

Final Words

I know I barely scratched the surface with this article, so grab the source(链接已失效) and play around. Feel free to post your favourite table designs, especially if it’s something I missed out. Over to you.

via  Top 10 CSS Table Designs

英文原文的作者是 R. Christie,访问原文或者需要就表格样式问题向作者提问,请点击这里。可以查看效果展示,或者下载源文件©

本文发表于水景一页。永久链接:<http://cnzhx.net/blog/top-10-css-table-designs/>。转载请保留此信息及相应链接。

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>