Formatting Tables with CSS

  • follow us in feedly
Published February 18, 2013 by Brad Knutson
100% CSS Tables

If you read my post on Formatting Tables with jQuery you know that tables with alternating rows or columns (or both!) are more user friendly, they are easier on the eyes, and frankly just look better. In that post, I showed you how to accomplish this look with jQuery and a little CSS, but briefly alluded to there being other options.

Let’s look at a 100% CSS option.

We will be leveraging the CSS pseudo class :nth-child. Note: the :nth-child pseudo class is not supported in IE8 or older. If you are still using IE8 or older, for the betterment of the world as a whole, please upgrade to a competent web browser.

CSS

tr:nth-child(odd) {
   background: #EFEFEF;
}

The Result

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4

That looks great. Like the jQuery post, can we also translate this to columns? Of course, below is the CSS necessary.

CSS

td:nth-child(even) {
   background: #EFEFEF;
}

The Result

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4

OK, what about a checkered table. Yup, we can do that too with just CSS.

CSS

tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
   background: #EFEFEF;
}

The Result

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4

OK, so if we get the same results in both the jQuery and CSS solution, why wouldn’t we choose the CSS solution? It’s less code, and easier to write. In these examples, the less code would provide a non-noticeable difference in page load time, so that point is moot, but with the ever improving HTML5 spec and CSS3’s growth, I personally would choose the CSS-only option.

What about a hover example? When you hover over a cell, the row background color changes. We can do that on top of the alternating colored rows for an even more dramatic effect.

CSS

tr:nth-child(odd) {
   background: #EFEFEF;
}
tr:hover {
   background: #FFFFE0;
}

The Result (mouse over the table to see)

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">