Tables are very important parts of the web interface. They are (hopefully) used for tabular data. It is one of the oldest and most basic HTML presentation tag but in order for it to smoothly fit into the new CSS age, we need to look at the most practical way in correctly setting up the markup and the CSS.

Nowadays, we no longer wish to make separate instances of a similar application for different clients. We want to thrive on making a single application that will fit the needs of as many clients as possible. This task is very challenging. In my opinion the ideal situation is to have the clients and developers both understand the benefits of the end goal and compromise to reach it. As developers we can always dream to have a single application reach the level of customization we can accomplish with many separate applications and yet don’t confuse the heck out of the end users. While I am unsure if that’s ever a possibility, I know ways that might help get us closer.

One of the biggest challenges is to give each client who uses the same application their own unique UI presentation. This is no small task and I only plan to address a small issue you might encounter in accomplishing this task. That’s how to mark up a table with the most amount of UI flexibility.

A traditional table might look something like this:

<table>
<tr>
	<th>
		Name
	</th>
	<th>
		Phone number
	</th>
	<th>
		Date of birth
	</th>
</tr>
<tr>
	<td>
		Mike White
	</td>
	<td>
		123-456-789
	</td>
	<td>
		10/11/1976
	</td>
</tr>
<tr>
	<td>
		Nancy Green
	</td>
	<td>
		987-644-311
	</td>
	<td>
		02/24/1950
	</td>
</tr>
</table>

With no CSS classes specified in any elements, it will be hard to style this table with much customization. You can add styling to the table, tr, th and td tags but they will have to be uniformly defined. You will have a lot more flexibility if add more classes to each element like below:

<table class="people" cellpadding="0" cellspacing="0" border="0">
<tr>
	<th class="first">
		Name
	</th>
	<th>
		Phone number
	</th>
	<th class="last">
		Date of birth
	</th>
</tr>
<tr class="odd">
	<td class="name">
		Mike White
	</td>
	<td class="phoneNumber">
		123-456-789
	</td>
	<td class="dateOfBirth">
		10/11/1976
	</td>
</tr>
<tr class="even">
	<td class="name">
		Nancy Green
	</td>
	<td class="phoneNumber">
		987-644-311
	</td>
	<td class="dateOfBirth">
		02/24/1950
	</td>
</tr>
</table>

Notice I applied classes to the table, each of the alternating rows and each of the columns. And also notice I added

cellpadding="0" cellspacing="0" border="0"

to the table tag. This is very important since CSS does not have direct cellpadding and cellspacing controls, you cannot take away the natural cellpadding & cellspacing each browser applies to all tables. It’s the best to set them to 0 and control everything via CSS.
Since I’ve been working with JSF, I will give an example in JSF. The t:dataTable tag can very easily generate the table markup above.

<t:dataTable value="#{myList}" var="list"
	styleClass="people"
	cellspacing="0" 
	cellpadding="0" 
	border="0"
	rowClasses="odd,even"
	columnClasses="name,phoneNumber,dateOfBirth">
	<t:column headerstyleClass="first">
		<f:facet name="header">Name</f:facet>
		<t:outputText value="#{list.name}" />
	</t:column>
	<t:column>
		<f:facet name="header">Phone number</f:facet>
		<t:outputText value="#{list.phoneNumber}" />
	</t:column>
	<t:column headerstyleClass="last">
		<f:facet name="header">Date of birth</f:facet>
		<t:outputText value="#{list.dateOfBirth}" />
	</t:column>
</t:dataTable>

Now we have the markup, let’s go thru a simple table styling.

The first things I’d start with are these:

table.people {
	width: 100%;
	border-collapse: collapse; /* so we can control cellspacing in a practical way */
}

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
}

Let’s see how it looks:

I usually apply border-collapse: collapse on the table so you can control the border width with td tags and without seeing double borders between cells. The padding on td & th tags really work just like cellpadding inside of the table tag. Except you have more flexibility now as if you really want, you can have different paddings for every cell.

Now let’s add some border.

Change the previous th,td styling definition to below:

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	border: 1px solid #000; /* let's apply borders */
}

Let’s see how it looks:

Now this is the look you usu. want. If you take away the border-collapse: collapse; and then your table will look like this:

TIP: do not apply border on the tr tag since it does not understand it. To get borders on tables, always add border defintion on td and th tags.

Now let’s give the table header a different background color, add the alternating colors and border colors.

table.people {
	width: 100%;
	border-collapse: collapse; /* so we can control cellspacing in a practical way */
	border-bottom: 1px solid #000;
}

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	border: 1px solid #000; /* let's apply borders */
	border-bottom:0;
}


table.people th {
	background-color: #ddd;
	color: #BB0000;
	border-bottom: 2px solid #000;
}

table.people tr.odd {
	background-color: #DDFFFF;
}

table.people tr.odd td {
	border-top: 1px solid #ccc;
}

table.people tr.even {
	background-color: #FBFBFB;
}

table.people tr.even td {
	border-top: 1px solid #BBEEEE;
}

Let’s see how it looks:

TIP: table bottom border does not override td bottom border (I’m not sure if it’s a bug) therefore it’s important to NOT define a td bottom border and define a table bottom border if you want them in DIFFERENT colors and/or styles.

Let’s talk about cellspacing. Personally I’ve never found a real need for cellspacing in styling tables. It is something CSS cannot truly accomplish with limited support of border-spacing in browsers (mainly it’s not supported by IE 6). However, you may be able to *fake the look* by using a border color that’s the same as the solid background color. Please take a look at the example below.

body {
	background-color: #000;
}

table.people {
	width: 100%;
	border-collapse: collapse; /* so we can control cellspacing in a practical way */
	border-bottom:0; /* you may not want the bottom of your table have spacing */
}

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	border: 4px solid #000; /* this can be seen as cellspacing... */
	border-bottom:0;
}

/* you may not want the top of your table have spacing */
table.people th {
	border-top: 0;
}

/* you may not want the left most and right most side of your table have spacing */
table.people th.first,
table.people td.name {
	border-left: 0;
}

table.people th.last,
table.people td.dateOfBirth {
	border-right: 0;
}

table.people th {
	background-color: #ddd;
	color: #BB0000;
}

table.people tr.odd {
	background-color: #DDFFFF;
}

table.people tr.even {
	background-color: #FBFBFB;
}

View the example