Setting the Table

February 17, 2005

Don’t be afraid to use tables in your html, that is for tabular data, tables are a great way of listing items in tabular format. Because many of us have been using tables for layout over the past many years we never really learned the intricacies and real uses of a table. With CSS and HTML you can really make those tables look good and work for you.

A typical table consists of elements for columns, rows, headings, and a caption. Many of these have been ignored in the past because we never used tables properly.

» Example 1

The forgotten table settings

Because tables were mis-used in the past there have been some table elements that were tossed to the wayside and never used when creating a proper table. Some of these elements are caption:

• colgoup
• col
• caption
• thead
• tfoot
• tbody

The caption element is an optional element to be used if you wish describe the purpose of the table. The colgoup and col elements are used to create structural divisions within a table. For example setting the width of a particular column without having to define the width for each td in that column. Tip: Any style you apply to a col will be overwritten with any styles you apply to tr or td in the style sheet. Also, I tend to use the width property with each col instead of using the style sheet, this insures that the table will degrade nicely without styles.

The thead, tfoot, tbody allows rows to be grouped into sections. Let us get back to setting the table. Some of you may wonder why we should still use some of the table properties like width, rowspan, colspan, border, and others at the markup level, when this can be accomplished with CSS. To allow tables to degrade nicely without CSS presentation and are essential part of the markup of a table. The CSS, when added, will override any of the table element properties.

Setting the table for your mother-in-law.

So this is when we want our table to look its best. Enter CSS. With CSS we can make this table look great. ALternating row colors is a great way to start. With out any programming you can use the zebra tables method—CSS 3 does have a property coming for this.

Here are some of my favorite style sheet properties that I always use when styling a table.

• border-collapse
• background
• border

» Example 2

Adding a table leaf

Oft times we have content that runs out of its cell and that can mess up your table layout. Enter the text-overflow property. It adds an ellipsis at the content if it overflows out of the box. Although it is only fully supported by IE currently, we can still mimic the effect in other browsers with the overflow property, you just don’t get the ellipsis character. Also to ensure that visitors will be able to read the entire contents of the cell, you can put a ‘title’ property on that cell with the complete contents

table {
	table-layout:fixed;/*Needed for 
              text-overflow to work on a td*/
...
}
table td {	
	margin: 0;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

» Example 3

Ring the dinner bell

Now this a table that will be ready for any guest—enjoy at the clean, accessible and semantic table.

Other Table Settings

As always there are several ways to skin a cat. Here are some more tutorials or examples of designing tables.

• Pure CSS Scrollable Table
• Zebra Tables
• Javascript and tables
• Bring on the Tables
• Sortable Tables with Javascript