原文链接: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 |
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 |
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 |
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 |
---|---|---|---|---|
The above data were fictional and made up, please do not sue me | ||||
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |