Styling tables with CSS
20th September 2008OK, let me start by saying yes, though we are using CSS, tables are meant to be used when displaying tabular data such as a comparision list, a calendar or any other information that needs to be presented in rows and columns. What is wrong is to use tables for the layout of your page. Before CSS this was a necessity but today it is a big no no! Today we use CSS to style our tables.
Now that we have cleared that out, let us get to the fun part. Assume that we want to display an inventory list of bolts and screws. We use the following HTML to create a table like the one in Image 1.
<table>
<tr>
<th>Serial Number</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>1001</td>
<td>Flat Head Screw</td>
<td>4.25</td>
<td>1024</td>
</tr>
<tr>
<td>1002</td>
<td>Hex Bolt</td>
<td>6.83</td>
<td>1000</td>
</tr>
<tr>
<td>1003</td>
<td>Hex Nut</td>
<td>5.10</td>
<td>1000</td>
</tr>
<tr>
<td>1004</td>
<td>Socket Cap Screw</td>
<td>6.90</td>
<td>1200</td>
</tr>
</table>
Image 1: Plain table
Adding a border to the table
Pretty boring table huh? Not too easy to read either. Adding borders to the table will make it both look better and easier to read. This can be done in a blink of an eye with CSS. All we need to do is add a class to the table and set the borders. We'll also set the cellspacing to 0 in the our HTML. Alter the HTML above from
<table>
...
to
<table cellspacing="0" class="inventoryTable">
...
Link the following CSS to it and you will end up with a table that looks like Image 2.
.inventoryTable{
border:1px solid #000000;
text-align:left;
}
.inventoryTable td, .inventoryTable th {
border:1px solid #000000;
padding:3px 10px;
}
Image 2: Table with borders
So, we added a 1px border to the table it self, which means we have a border around the entire table. We also added a 1px border to all the td's and th's in the "inventoryTable" table, which means every cell has a border. This obviously means we have a table with 2px thick borders. (Don't worry, I'm going to show you how to get a table with 1px thick borders in a moment) "padding:3px 10px" means we are adding a 3px padding to the top and bottom and 10px padding to the left and right of each cell, it is the same as writing "padding:3px 10px 3px 10px". Although this may or may not have been what you wanted, 2px borders, atleast you have seen how easy it can be to add some style to a table.
Also notice that I have added "text-align:left" to the table, I feel it's easier on the eyes this way.
1px border around each table cell
When aiming for a 1px border on the table cells, like the table in Image 3, we need to rethink our strategy a bit. Instead of adding a border around the entire table we'll just give it a left and top border and instead of adding a border around each cell we'll just give them a right and bottom border.
Image 3: Table with 1px borders
To make this happen we just need to alter our CSS a little bit. We leave our HTML the way it is.
.inventoryTable {
border-left:1px solid #000000;
border-top:1px solid #000000;
text-align:left;
}
.inventoryTable td, .inventoryTable th {
border-right:1px solid #000000;
border-bottom:1px solid #000000;
padding:3px 10px;
}
That's it, that's how simple it is.
Lined table
Now lets assume that we don't want borders around each column, we just want a lined table, where only the rows have a border, like the one in Image 4.
Image 4: Lined table
Yupp, you guessed it. This is also simple to do! For this we need a border around the table and then a bottom border on each th and td. We also need to make sure there is no bottom border on the table itself or else we'll end up with a 2px border at the bottom of our table. We just need to change our CSS to look like this…
.inventoryTable {
border:1px solid #000000;
border-bottom:0px;
text-align:left;
}
.inventoryTable td, .inventoryTable th {
border-bottom:1px solid #000000;
padding:3px 10px;
}
Notice that I'm setting a border around the entire table and then setting "border-bottom:0px" after that. This is, as mentioned above, to ensure that we don't get two borders at the bottom, i.e. one of the last td and one of the table.
Alright, now that you've got this under control let me introduce you to "Zebra Striping".
Zebra Striped tables
Zebra striping is when you shade alternate lines in a table, like in Image 5. Many believe that zebra stripes help make it easier to read the table, I would be one of them.
Image 5: Zebra striped table with borders
To shade alternate rows of a table you will need to add a class to the alternate rows in the HTML. This means you'll have to change every alternate tr from
...
<tr>
...
to
...
<tr class="alt">
...
If you are using server-side scripting I would highly recommend that you let a script do this for you. If your table is large or often changes, it could become a pain to keep updating the HTML.
To make our table look like the one in Image 5 we will need the following CSS.
.inventoryTable {
border-left:1px solid #000000;
border-top:1px solid #000000;
text-align:left;
}
.inventoryTable td, .inventoryTable th {
border-right:1px solid #000000;
border-bottom:1px solid #000000;
padding:3px 10px;
}
.inventoryTable th {
background-color:#333333;
color:#FFFFFF;
}
.alt {
background-color:#CCCCCC;
}
Simple, right? Just add a class to the alternate tr's and style them. Notice that we have added a background color to the headers, this make them more prominent and the table visually more appealing.
Now just to show you some more examples and to spark your imagination here are two more zebra striped tables.
Image 6: Zebra striped table with white borders
Image 7: Zebra striped table with gradient in header background
And of course here is the CSS for the table in Image 6.
.inventoryTable {
border-left:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
text-align:left;
}
.inventoryTable td, .inventoryTable th {
border-right:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
padding:3px 10px;
}
.inventoryTable th {
background-color:#333333;
color:#FFFFFF;
}
.alt {
background-color:#CCCCCC;
}
This is almost the same code that we used to create the table in Image 5. All we have done is changed the border color from black to white.
The table in Image 7 has a 1px wide gradient as the background for the headers. The CSS below will give you that table.
.inventoryTable {
border:1px solid #000000;
text-align:left;
}
.inventoryTable td, .inventoryTable th {
padding:3px 10px;
}
.inventoryTable th {
background-color:#333333;
background-image:url(header-bg.gif);
border-bottom:1px solid #000000;
color:#FFFFFF;
}
.alt {
background-color:#CCCCCC;
}
That's it folks. Hope you found this post helpful and thank you for reading.
Did you enjoy this post?
If you enjoyed this post you can subscribe to my 
RSS feed to know when I post another article. It would also be great if you bookmarked this post on your favorite social bookmarking site, if you have signed up with any.
