表格 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，包括 td 和 th）设置足够的留空（padding）就可以了，然后在顶部的标题行下面设置一个 2 像素（px）宽的边框（border）。

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

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

重要!

仔细微调版面设计和单元格之间的留白

优点

易于定义样式，对简单的表格非常友好

缺点

tr:hover 规则在 IE 6 下不能正常工作，如果行数较多则会使得表格难以阅读

可以调整的特性

颜色、排版、tr:hover 效果

2. 竖式简约设计¶

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

使用大的 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:

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).

	...

		<tr class="odd">

		   <td>...</td>
		   ...
		</tr>

		<tr>
		   <td>...</td>

		   ...
		</tr>

	...

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:

<table>

		<!-- Colgroup -->
	   <colgroup>
	      <col class="vzebra-odd">
	      <col class="vzebra-even">
	      <col class="vzebra-odd">

	      <col class="vzebra-even">
	   </colgroup>

		<!-- Table header -->
	   <thead>
	      <tr>
	         <th scope="col" id="vzebra-comedy">Employee</th>

	         ...
	      </tr>
	   </thead>

	   ...
</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.

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:

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:

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

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:

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:

* html table tbody td
{

		  /* IE CSS Filter Hack goes here*/

}

The table would look like this:

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:

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

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，访问原文或者需要就表格样式问题向作者提问，请点击这里。可以查看效果展示，或者下载源文件。©

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