0
点赞
收藏
分享

微信扫一扫

html 表格设计


Top 10 CSS Table Designs

  • By Guest Author

  • August 13th, 2008  
  • CSS, Tables  
  • 417 Comments

By R. Christie

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:

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

  1.  of the

table

  1.  to 

100%

  1. . Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
  2. 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.
  3. 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

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


Important!

Carefully finetune the typography and the padding between the cells Pros Very easy to style, good for simple tables Cons tr:hover

Play with tr:hover

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 amouseover


Important!

tr:hover

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

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 dashed or 

dotted

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

	...
...

		<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  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 ofcolgroup and col

<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 colgroup

Play With 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

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 tr:hover

Play with tr:hover

7. Newspaper

To achieve the so-called newspaper effect, apply border to table

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:hovereffects of the cells (td and th). Other alternatives are presented below:

The above data were fictional and made up, please do not sue me

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

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!

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 tr:hover

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

The above data were fictional and made up, please do not sue me

 

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

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 tr:hover

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 thebackground-image of the table. You can add 50% grey png-image as background-image

* html table tbody td
{

		  /* IE CSS Filter Hack goes here*/

}
* html table tbody td
{

		  /* IE CSS Filter Hack goes here*/

}

The table would look like this:

IE 6 users won’t see the transparent background if the hack is not applied

Employee

Division

Suggestions

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 asbackground-image

Give background color to the table cells to achieve seamless transition

Employee

Division

Suggestions

Rating

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

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.

ABOUT THE AUTHOR

R.Christie is studying information systems at college. He viciously juggles activities from college, web design, programming, church, to sport activities. You can say hello to him via e-mail.

EDITOR’S NOTE

This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.

How good is the post “Top 10 Express CSS Table Designs”? 
( polls)



Tags:CSSTables

 

举报

相关推荐

HTML之表格设计错因纠正

HTML表格

html表格

HTML - html 表格(二)

HTML--表格

HTML|表格标签

0 条评论