This article deals with how you can give alternate rows of a table a different colour ("color" in US English) using CSS. This makes your table faster to visually scan, since it's easier to spot which line a particular piece of data is on. (If you are not sure what I mean, scroll down to see the illustration later in this article.)
Since this guide deals with HTML and CSS, you will need some knowledge of both. At the very minimum, you should know how to insert CSS into a web page. If your website is a blog, you must have some way of inserting CSS into your post.
Those who don't even have a website yet should probably start at the beginning, with How to Create a Website.
Let's say that you want to create a table that looks something like the following:
| First column | Second column | Third column |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
The HTML code for the demo is as follows:
And the CSS code is:
The pseudo-class that allows you to do all the alternate shading magic is nth-child. Specifically,
nth-child(odd) matches all the odd numbered children/descendants and nth-child(even) the even.
Take the following line from the demo above.
Translated to English, it means that the rules that follow apply to all odd-numbered <tr>
descendants of the <table> with the id demo. You can place any number of
normal CSS rules in that block. In my case, I merely placed rules to change the foreground and background colours.
If your table has a different id, you should change the part that says
"#demo" accordingly.
You can of course use different colours for your table. Just specify the value you want in
the background-color rule. The text (foreground) colour is controlled using a
color rule. For maximum compatibility, state your colours using RGB numbers,
as I did, instead of their English names. You can find a
list of HTML values for various colours
on Wikipedia, or, if your editor has a colour picker, just use that.
Note that only this block of rules is needed to create the alternate-row shading effect.
The remainder of the rules are there merely because I wanted my table to have a certain appearance,
and you can ignore them unless you want the same effect. For example, I added
border-collapse: collapse; to remove the space between each table cell,
padding to add a bit of space within each cell (so that the words don't go right up to the edge),
and rules for the caption to put it on a black background.
This code uses CSS features that require a fairly modern browser, such as the current versions of Chrome, Firefox, Edge and Safari. It will not work correctly in Internet Explorer 8 and earlier.
Copyright © 2021-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Give Alternate Rows of a Table a Different Colour (HTML/CSS)
