Designing pages for the web is not just a technical task. Sure it helps to understand the syntax of HTML and the workings of ASP, but without the basics of design under your belt, your content is not going to perform at its best. The Web Communications team has done most of the work for you, with CSS support and this Style Guide, your pages should already be looking good. But there is still much more to learn!

This page is to help you understand the principles of good information design using tables. This guide addresses how to create tables that display large amounts of information like this page versus using tables to design great looking pages like this one.

Also, this page is not filled with set in stone rules like other Style Guide pages. This page is a collection of suggestions and tips for designing better pages. You can use the information if you would like, but we are not going to sound the alarms if you don't. Have fun experimenting with the tips given, and see if you can make a well designed table of your own design.

Before the Table (or, Eating on the Floor)

Across the web these days, the most common use of tables is for laying out pages. Tables are great for web design and most sites use tables to build page structure. Even though web designers near and far are using tables for layout, that is not why the <TABLE> tag was added to HTML. Tables were added to HTML to display tabular data online (like the periodic table or a spread sheet). Scientists and researchers wanted a way to put their data online for people to share, and the <PRE> tag just was not cutting it. So with the next update to HTML (this was decades ago in web time, somewhere around 1994) the <TABLE> tag made its first appearance.

The problem with the <TABLE> tag now is that many people have forgotten how to use it for tabular data. With all the style and design advances to the web, table design is a forgotten art. With a well structured table, and the basics of good design, you will be on your way to helping people understand the information you want to put online.

Before we go any further, lets take a look at our sample data that we are going to format into a table. This data is formatted using the <PRE> tag, representing how data was presented before tables came along (btw, this is only for an example and is not an endorsement of hirsute puppets).

        Top Muppets with Funny Hair
=============================================
|   Muppet Name  |  Hair Color  |  Species  |
=============================================
1.  Beaker          Orange         Beakerish
2.  Animal          Red-orange     Monster
3.  Miss Piggy      Blonde         Pig
4.  Dr. Teeth       Orange         Humanish
5.  Waldorf         Grey           Humanish
6.  Sweetums        Light Brown    Monster
7.  Janice          Like Blonde    Humanish
8.  Zoot            Blue           Milesish 
=============================================

Setting the Table.

Now that we have some data that needs to go into a table, lets take a look at the parts of the <TABLE> tag and its attribute tags. Once we know the parts of a table and their attributes, we can start plugging in the data we have established. This page is only a basic reference to the <TABLE> tag and its attribute tags, for a more complete listing please take a look at the HTML Compendium site.

<TABLE>

The <TABLE> tag is a container tag that lets the browser know that the information inside the <TABLE> open and </TABLE> close tags is to be displayed as a table. This tag has a number of attributes to let the browser know how to display the <TABLE>. Listed below are a few of the design related attributes for the <TABLE> tag that we will be discussing on this page:

• border: Sets the width of the border.
• width: Sets the width of the table, can be either pixels or percentage.
• cellpadding: Amount of space around the data inside each cell.
• cellspacing: Amount of space between each cell.
• bgcolor: Background color of the table, can be either in hexadecimal or W3C colors.
• align: aligns the table left, right or center. Acts the same as the <IMG> align attribute.

<TR> (Table Row)

The <TR> tag is a container tag that defines a row of the table. Tables are divided into horizontal rows and vertical columns. As the browser defines a page from top to bottom using horizontal rows, a table is also defined the same way. A table row is made up of one or more table cells and should start with an open <TR> tag and end with a close </TR> tag. The close </TR> tag is optional, but you should get in the habit of using it. Here are some of the <TR> tag attributes that you will find handy when designing tables.

• height: Sets the height of the table row, can be either pixels or percentage.
• bgcolor: Background color of the table row, can be either in hexadecimal or W3C colors.

<TD> (Table Data or Table Cell)

In terms of the human body, if the <TABLE> tag is the skin, and the <TR> tags are the bones, the TD tag is everything else. This flexible tag defines a cell, or box, within a table that can contain either data or images. The main part of your table formatting will go in the <TD> tags. Like the <TR> tag, the <TD> tag must start with an open TD and should close with an optional end </TD> tag. Again, you should get in the habit of closing your <TD> tags as they make understanding your code much easier (not to mention a transition to XML just that much easier). The <TD> tag also has many more attributes than the <TABLE> or <TR> tag, here is a list:

• width: Sets the width of the cell, can be either pixels or percentage.
• height: Sets the height of the cell, can be either pixels or percentage.
• bgcolor: Background color of the cell, can be either in hexadecimal or W3C colors.
• align: aligns the contents of a cell left, right or center. Acts the same as the <IMG> align attribute.
• valign: vertically aligns the contents of a cell top, middle or bottom. Acts the same as the <IMG> valign attribute.
• colspan: Defines the number of columns spanned by the cell (from left to right).
• rowspan: Defines the number of vertical rows spanned by the cell (from top to bottom).

There are a few other table related tags such as <TH>, <THEAD>, <TBODY> and <TFOOT>. This document does not cover these tags as they are not necessary to good table design (meaning you can use them if you want to).

What's Wrong with a No-Frills Table

Now that we understand the three main table tags, lets take a look at our data in a simple, no-frills table:

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

Wow, incredibly dull huh? Plus it is a bit hard to read with all the lines and boxes. Lets face it, the table in this case is not an improvement over the <PRE> tag version above! The real question is why it is hard to read, and there are many reasons:

1. The borders are too distracting: HTML borders are designed to look 3D on a flat monitor, thus they take up a lot more space than they are worth. The 3D-ness of the borders also makes each of the cells look like boxes, and as all good human interface books on computers will tell you, visible boxes are for soliciting information, not presenting information.
2. No emphasis on data: Nothing is worse than presenting information to someone without letting them know what the important part of that info is. Someone looking at this chart has no way of knowing if the muppet name is more important than the species other than the order in which they appear.
3. The information is packed too tight: White space is the number one design element for good legibility. A easy to read book will have margins and a comfortable amount of leading (the amount of spade between lines of text - rhymes with bedding) Give the text room to breath a bit.

Finding ways to fix the problems with legibility is the designers task. With the above problems in our table lets look at ways to fix it:

1. Get rid of the borders: Step one to a better table should always be this solution. If you have tables with borders on your pages, take note because you will want to remove them. To remove the border on a table make the <TABLE> tag look like this: <TABLE BORDER="0">
2. Bold Important Data: As this list shows the Top Muppets with Funny Hair, let's bold the number for each muppet. The Column heads and the table title should also be bold.
3. Give everything space: The table will look much better with the addition of cellpadding and cellspacing to the <TABLE> tag. With the addition of cellpadding and cellspacing the <TABLE> tag will now look like this: <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="4">

With the addition of these simple solutions, our table is still not going to be perfect, but it will be much easier to read.

Sprucing up your Tables.

Here is our Table with the changes suggested from the last section:

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

Now, that is a little better than the last table and about the same as the <PRE> tagged version at the top of the page. So why does the <PRE> tag version still look as good, and what is wrong with what we have here? Lets take a look:

1. It doesn't look like a table anymore: With all the spacing and no borders, or data is now floating around the page. With each column a different width, some of the cells seem to run together.
2. It is hard to line up the data: With the space between each of the cells, sometimes your eye will wander up or down a row when reading. This is not so evident in our example, but in other tables it might be more of a problem.
3. The title and the column heads look the same: They stand out from the rest of the data, but you can't tell the two apart.

Now that we have identified some of the problem areas with our latest version of the table, lets look at fixes:

1. Even out the columns: Width three columns of equally important information, we should have them equally spaced. Lets add a Width attribute to each of the TD tags on the column headings or to even up things.
2. Box the data in without boxes: By adding a background color to the table is will provide some separation from the rest of the page, and tie the elements together. With black text I like to use a light color for the background, and as this is muppets, lets go with a light green. Or TABLE tag will now look like this: <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="4" BGCOLOR="#CCFFCC">
3. Make the title and column heads different: With a light green background, a dark green title bar should look good. Let's add a dark green BGCOLOR to the table title's cell, and make the text in that cell white. For the column heads, lets use a green that is a little darker than the background color of the table and leave the text bold.

Once these suggestions are added to our table, it should be much easier to read and look a lot better too!

The final touches

The latest version of our table with the included changes as suggested above:

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

From this point your table is looking pretty good. There are a few stylistic things that you can do to make the information easier to read, but otherwise the table is fine. If you have gotten this far, pat yourself on the back, you are well on your way to being a better web designer.

Other Table Suggestions

Below are a few other examples of how you might design a table to make the information legible and easy to read. These samples are only suggestions designed to help you come up with ideas. If you see a table you like, take a look at the code (by viewing source) and use it to learn. Notice that there are white lines between the cells on these examples. This is because there is no table background color set, only table rows and table cells have background colors.

Alternating Row Colors: Remember the old dot matrix paper with the green bars every three lines? This was added to the paper for legibility, and the same trick can be added to tables. Here is our table with alternating colors for each row:

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

Try Different Colors: Different colors can help to make your table stand out:

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

Alternating Column Colors: Designing information in a table for easy of legibility can take many different forms. Here is an example of alternating column colors to highlight the information in each row. This is useful when a specific part of the data needs to be compared.

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

Highlight the Most Important Data If your table had data that needs to stand out, use special colors and bold text for the information. In this example the highlighted Muppets are members of The Electric Mayhem, the muppet band. You can also put background colors in specific cells for important data.

Top Muppets with Funny Hair
	Muppet Name	Hair Color	Species
1.	Beaker	Orange	Beakerish
2.	Animal	Red-orange	Monster
3.	Miss Piggy	Blonde	Pig
4.	Dr. Teeth	Orange	Humanish
5.	Waldorf	Grey	Humanish
6.	Sweetums	Light Brown	Monster
7.	Janice	Like Blonde	Humanish
8.	Zoot	Blue	Milesish

Go forth and Design!

Table design is not the easiest part of designing effective HTML pages, but with a little extra time and thought your tables will make the information you are presenting much more effective.