Table Rows and Columns

With the growing use of CSS, the use of tables for page layouts is becoming less common. But tables are still important for their original and intended use -- displaying tabular data. Whether it's for a page of faculty and staff names and phone numbers, or the latest standings for the hockey team, tables will still be with us on web pages.

Simple data tables can be difficult to read if they contain more than a few rows or columns. Data can appear crunched together if it doesn't have enough separation between table cells. And data can be difficult to read if there is too much white space and/or the columns are too far apart.

Spending just a little bit of time styling your tabular data can make it much easier for your users to find the information they are looking for.

Spacing

While CSS has spacing tools to use on tables, Internet Explorer (vers. 6 and earlier) does not recognize the border-padding property in CSS, so there are a couple things site developers can do to minimize the differences between browsers:

1. Set the cellspacing property in the <table> tag to zero.
   <table id="mytable" cellspacing="0">
2. Use the border-collapse property in the CSS table declaration.
   table {
   border-collapse: collapse;
}

The border-collapse property in CSS has two options: separate and collapse. The separate option specifies that table cells each have their own borders. The collapse options specifies that table cells share borders. Most site administrators will find the "collapse" option most useful for applying styles.

With these two options used, you will find most padding and margin properties applied to <td> and <th> tags will produce the results you want.

table {
   border-collapse: collapse;
   width: 90%;
   border: 1px solid black;
}
td, th {
   padding: 0.5em 1em 0.2em 1em
}

The example above will produce a table that uses 90 percent of the available width, with a 1 pixel solid black border on the overall table, and table cells (td's and th's) with half an EM space of padding on the top, 1 EM space of padding left and right, and one-fifth an EM space padding on the bottom.

Fonts

For font consistency on your web site, your main style sheet should always specify base defaults for your fonts. These usually include a declaration to apply to font-family to <p>, <li>, <td> and <th> tags. This would account for text in all paragraphs, lists, and inside table cells.

p, li, td, th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

If you want to use a different font (or font size) in a specific table design, use the "id" attribute to name the table, and create an advanced style for that specific table.

table#myexample td, th {
   font-family: Georgia, Times, serif;
}

The above example would use Georgia font in cells of the table with id="myexample".

Backgrounds and borders

Background colors, background images, and borders on table elements are declared in the same way as we've already learned in CSS.

tr {
   background-color: #ECECEC;
   border-bottom: 1px solid #727272;
}
tr:hover {
   background-color: #ACACAC;
}

In our example above, we have set the background color for our table rows to a light gray (#ECECEC) and each row will have a 1 pixel solid dark gray (#727272) border. Additionally (in browsers that support row hover), the rows will turn just a little bit grayer (from #ECECEC to #ACACAC) when the mouse is hovering over that row.

CSS Table Gallery is a site with a large list of table examples using CSS styles. All the CSS code for each example is available for download.