CSS: Colorize Table Rows Alternately only with CSS
Tutorial by Stefan Trost | Last update on 2023-06-19 | Created on 2012-05-28
For tables without border, it can often be quite helpful, to color the rows of the table alternately in a different color, so that a line is easier to read and the whole table looks clearer.
One example we can see here:
Row 1 | Color A | Text |
Row 2 | Color B | Text |
Row 3 | Color A | Text |
Row 4 | Color B | Text |
Row 5 | Color A | Text |
If we would like to implement the example on our website, the problem occurs, that it can take forever sometimes to color all of these table rows by hand with the appropriate design rules. Especially when we are running a website that contains many tables and we are also changing these table regularly, it means a lot of work.
Fortunately, there is a solution, how we can solve the entire problem by using CSS.
Format Table Rows with CSS
Let's have a look at the following CSS rules:
tr:nth-child(even) { background-color: #FD9D5D; } tr:nth-child(odd) { background-color: #C0F390; } table { border-spacing: 0px; }
The CSS selector nth-child makes it possible to select the nth occurrence of an element. In the example, we refer to the tr element that is our table row. We use "even" to assign a color to all even occurences of the element and we use "odd" to assign another color to all odd occurences of the element. With this, we achieve our alternate coloring of the lines. Of course, we can also assign only the "even" or the "odd" lines to make the other lines looking like the background.
In addition, we set the border-spacing of all tables to 0 pixels. This causes, that the unsightly "hyphens" between the individual cells of the table will not occur. If you want them, however, you can simply omit this CSS rule, of course.
Browser Support
The required CSS selector nth-child is supported by the browsers Opera, Chrome, Safari, Firefox (from version 3.5) and Internet Explorer (unfortunately only from version 9). The old Internet Explorer versions 6, 7 and 8, which unfortunately are sometimes still in use, do not support the selector. In these browsers, the rows appear uncolored.
In the event, that you are creating the table dynamically with PHP, you can use the tip Colorize Table Rows Alternately with PHP. This tip explains how to color the rows in a table with PHP, which will then be visible in all browser versions.
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
PHP: Colorize Table Rows Alternately with PHP
Tutorial | 0 Comments
MySQL: Line Breaks in MySQL
Tip | 0 Comments
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
CSS: Why is DarkGray brighter than Gray?
Info | 0 Comments
Rewrite Text Files with a fixed Line Length
Tutorial | 0 Comments
CSS Hacks for the Internet Explorer
Tip | 1 Comment
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.