详细解决方案
十个漂亮的表格设计
热度：474 发布时间：2012-10-29 10:03:53.0
10个漂亮的表格设计
原文链接：http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
1. Horizontal Minimalist
?
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 |
?
?
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 |
2. Vertical Minimalist
?
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
|
3. Box
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
|
4. Horizontal Zebra
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
|
5. Vertical Zebra Style
?
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
|
6. One Column Emphasis
?
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
|
7. Newspaper
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 |
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
|
8. Rounded Corner
Company
Q1
Q2
Q3
Q4
| Microsoft |
20.3 |
30.5 |
23.5 |
40.3 |
| Google |
50.2 |
40.63 |
45.23 |
39.3 |
| background-color: #e8edff; border-top-width: 1px; border-top-style: solid; border-top-color: #ffff
|