CSS Your Tables

This month’s CSS lesson will cover tables. Tables are ubiquitous to web design, and handling them can be a chore. With a little CSS, getting all of your tables looking right is a piece of cake.

Let’s take a look at some table CSS:

table.datareport {
border-width: 1px;
border-spacing: ;
border-style: outset;
border-color: #679966;
border-collapse: collapse;
background-color: white;
}

table.datareport td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #679966;
background-color: white;
FONT-SIZE: 10px;
}

Here we’re defining a css class called datareport, in particular the table tag and the column tag. We’re defining font sizes, border colors and styles, background colors, etc. What this particular CSS definition will get us is a table like this:

<table align=”center” width=360 class=’datareport’>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Some Data</td>
<td>Some Data</td>
</tr>
</table>


The PC likes green.

Now let’s do something about our header row, which doesn’t look much like a header row. We’re going to define another special part of the CSS datareport class for it:

table.datareport th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #679966;
background-color: #679966;
font-weight: bold;
font-size: 10px;
color: white;
}

Here we’re telling it to use a bold font and different background and font colors. Then we tell our header columns in the table that they’re header columns:

<th>Header 1</th>



Viola. We can use the same technique to define cell types for footers or other special uses.

Besides having to write less code, the beauty of using CSS tables is that you can change all of the tables on your page or web site - new colors, fonts, etc. - simply by editing the CSS. It also works for datagrids and other server side .NET table elements.

One thing to note is it’s best to make your class a bit generic. For example, notice how I set the table alignment and width at the table tag and not in the CSS. I might have different size and alignment needs throughout my page, and by not setting those properties in the CSS I maximize the usefulness of the datareport CSS class.