CSS Table Coding Tips

Charlie R. Claywell
Reviewed by Vikki Olds
CSS Tables

Some data is just best displayed in a table, but that does not mean it needs to be bland in appearance. A table can - and should - be styled in a way that adds to the content while complementing the site's overall look. Although styling tables may seem intimidating, when you break them down to their bare essentials, designing them is not all that complicated.

Understanding All the Parts

When you look at the main parts of most tables, they can be broken out into the following four parts:

  • Table <table> - This is the container that holds all the contents.
  • Headers <th> - These are columns headers; when left unstyled they will appear bold.
  • Rows <tr> - These are the horizontal containers inside the table. When a table's rows are colored -- often with alternating colors - it is the tr tags that are targeted.
  • Columns <td> - The column tag stands for table data, and this can be confusing for some.

When you look at a table's tags, there will be a row <tr> followed by each cell's content <td>. Each of those cells are part of a different column. So, a typical row looks like this:

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

Creating the look

Table Tag

You can create the look you want using CSS instead of HTML. Starting with the table itself, give the table an ID -- #YourTable. This is where you can set font styles as well as the overall table width. For example,

#YourTable {

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:90%;

border-collapse:collapse;

color:#000000;

}

The border-collapse property determines whether the borders are collapsed into a single border or separated. Generally speaking, it is best to collapse them.

Table Data and Headers

Next, style for font-size and any border or cell-padding for each row.

# YourTable td, # YourTable th {

font-size:12px;

border:1px solid #ff7f00;

padding:3px 6px 2px 6px;

}

Row Colors

# YourTable tr.alternate td {

background-color:#ffaa56;

}

Headers

Make the header - or title row - stand out by making the font a different size or the row a different color. Use any combination that makes it obvious to the user that the text identifies what is inside the columns.

#YourTable th {

font-size:16px;

text-align:left;

padding-top:7px;

padding-bottom:6px;

background-color:#ff7f00;

}

Complete CSS and HTML

This is what your style looks like when it is all pulled together.

#YourTable {

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:90%;

border-collapse:collapse;

color:#000000;

}

#YourTable td, #YourTable th {

font-size:12px;

border:1px solid #ff7f00;

padding:3px 6px 2px 6px;

}

#YourTable th {

font-size:16px;

text-align:left;

padding-top:7px;

padding-bottom:6px;

background-color:#ff7f00;

}

#YourTable tr. alternate td {

background-color:#ffaa56;

}

<table id="YourTable">

<tr>

<th>Header One</th>

<th> Header Two</th>

<th> Header Three</th>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td> Row 1, Cell 2</td>

<td> Row 1, Cell 3</td>

</tr>

<tr class="alternate">

<td> Row 2, Cell 1</td>

<td> Row 2, Cell 2</td>

<td> Row 2, Cell 3</td>

</tr>

<tr>

<td> Row 3, Cell 1</td>

<td> Row 3, Cell 2</td>

<td> Row 3, Cell 3</td>

</tr>

<tr class="alternate">

<td> Row 4, Cell 1</td>

<td> Row 4, Cell 2</td>

<td> Row 4, Cell 3</td>

</tr>

</table>

Special Circumstances

The simplest and most common way to spruce up a table is with alternating row colors, since this usually simplifies reading the content. However, there are other methods for creating stylish tables. Some other common ways to improve the look of a table include:

Background Image

Background images can be added to create a watermark, or serve as a background for the entire table. An image is attached to the table by using the background-image attribute. Remember, though, that if a background color is also used it will override - or block - the image from being seen.

#YourTable {

background: url("image.jpg") no-repeat;

}

Round Corners

This is an increasingly popular way to spice up a table. You can round one or all the corners as much or as little as desired. To round the top two corners:


#YourTable th:first-child {

-moz-border-radius: 6px 0 0 0;

-webkit-border-radius: 6px 0 0 0;

border-radius: 6px 0 0 0;

}

th:last-child {

-moz-border-radius: 0 6px 0 0;

-webkit-border-radius: 0 6px 0 0;

border-radius: 0 6px 0 0;

}

th:only-child {

-moz-border-radius: 6px 6px 0 0;

-webkit-border-radius: 6px 6px 0 0;

border-radius: 6px 6px 0 0;

}

Box Shadow

You can give the table a drop shadow to make it appear to be coming off the page. This is accomplished with the box-shadow attribute. The first two numbers used for the style control the vertical and horizontal position of the shadow. They are required, but all other attributes are optional. The third value controls the shadow's degree of blur and the fourth value sets the size of the shadow. You can also choose the shadow's color.

To place a shadow on your table with a gray shadow use this code:

#YourTable {

box-shadow: 5px 5px 4px 1px #ccc;

}

Remember the Purpose

Creating a well-designed and functional table goes way beyond how the table is styled. When users comes to your site for information, the content is what they are interested in. The first rule for designing a quality table is making sure the information is laid out in a logical manner that is easy to understand. Using a 'clever' design will be of little value to users if they are unable to find, understand or interpret the data your table is displaying.

Was this page useful?
CSS Table Coding Tips