原文:http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!
First things first
We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:
<!-- 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>
You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — thesource package is provided in the end of the article.
Before we start, let’s review the general rule of thumb for styling of tables:
-
Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the
width
of the table
to 100%
. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
-
Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
-
Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.
Now that we are all set up let’s get going, shall we?
1. Horizontal Minimalist
Horizontal tables are tables that are read rather horizontally than vertically. Each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding
to the cells (td
and th
) and put a 2 pixel border underneath the header.
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 |
Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td
elements:
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 |
The tr:hover
rules are very useful to aid people reading a minimally designed tables. When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.
Important!
Carefully finetune the typography and the padding between the cells
Pros
Very easy to style, good for simple tables
Cons
tr:hover
rules don’t work in IE 6, table can be confusing if it has too many columns
Play with
Color scheme, typography, tr:hover
effects
2. Vertical Minimalist
Although rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalistic style by adding whitespace separators between columns.
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 |
Add large border-left
and border-right
with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover
does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover
event occurs, but that’s beyond the scope of this article.
Important!
Carefully finetune the typography and the padding between the cells, do not add tr:hover
effect
Pros
Easy to style, good for simple tables
Cons
Can not be used if background is not a solid block of color, suitable only for some tables
Play With
Color scheme and typography
3. Box
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).
...
<tr class="odd">
<td>...</td>
...
</tr>
<tr>
<td>...</td>
...
</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:
<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.
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
andth
). 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
<dt sty
分享到:
相关推荐
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
好看的css table样式 常见用于报表相关
纯css table 样式布局制作人口统计table表格样式代码 纯css table 样式布局制作人口统计table表格样式代码
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
好看的css table列表样式
table表格的样式标签!包含了css,还有图片! 进来看看吧
CSS样式Table[6] - style-table
CSS设计表格变色经典代码CSS design classic color code table
针对Table经常使用的CSS样式,样式不错。 也可以到http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
CSS控制table表头
利用CSS控制表格table的交替颜色 代码和讲解部分
很好看的Table CSS,做网页很有用
HTML Table 漂亮的CSS 包含了格式各样的CSS,代码非常独立,肯定能够让你用到的。
CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo
整体代码 博文链接:https://tylerxi.iteye.com/blog/215668
CSS 美化Table,可以多选Table的行和列
bootstrap-table.css 表格拖拽排序里面有bootstrap-table表格拖拽行所需js以及css非常好用
CSS样式TABLE的一些特效,做网页很有用的!
漂亮的table样式(内附css) 漂亮的table样式(内附css)
轻松实现CSS菜单的制作