Table Columns with Alternating Colors using CSS

By using the nth child selector in CSS3 you can create a table with columns that have alternating colors.

Further down this page I'll show you a working example and provide the necessary CSS code for adding this simple style to a table.

Browser Support for Nth Child Selector

All modern browsers such as Chrome and Firefox support the nth child but this pseudo class is not supported in Internet Explorer 8 and versions lower than eight. Because of this, I have added an extra line of CSS code so these older versions of IE will at least have a default background color for all the table cells.

This allows the table to perfectly readable and usable by visitors but it doesn't exactly replicate the alternating color columns that most of the audience will experience in their more modern browsers.

CSS Table Code Example for Alternating Columns

The CSS Column Code for this Table

To implement the html table above you would have to use the tr td:nth-child(odd) selector to define all the cells in odd columns in a table and the tr td:nth-child(even) selector to define all the cells in the even columns of a table.

The complete working CSS code and HTML for the table example can be copied from the box below.

<style type="text/css">
	.TFtableCol{
		width:100%; 
		border-collapse:collapse; 
	}
	.TFtableCol td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	/* improve visual readability for IE8 and below */
	.TFtableCol tr{
		background: #b8d1f3;
	}
	/*  Define the background color for all the ODD table columns  */
	.TFtableCol tr td:nth-child(odd){ 
		background: #b8d1f3;
	}
	/*  Define the background color for all the EVEN table columns  */
	.TFtableCol tr td:nth-child(even){
		background: #dae5f4;
	}
</style>

<table class="TFtableCol">
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>

Alternating Table Columns with CSS3 Code

As you can see, it's pretty straightforward to build a table with columns of alternating colors by using some simple CSS code.

This feature is well supported in all current browsers. In Internet Explorer 8, the nth child selector is not supported and you can easily provide this small portion of your users with a visually readable alternative.