CSS Table with Alternating Color Rows
You can use the nth child selector in CSS3 to very simply create tables with alternating row colors.
I'll show you an example of a table with alternating rows along with some working code that you can copy.
If you need it, I also have information on how to build a table with alternating columns.
Browser Support for Nth Child Selector
All modern browsers support the nth child selector but it's not supported in Internet Explorer 8 and versions below. With that in mind, I have added an extra css declaration so that in these older version of IE all the tables rows will have a default background color. This is just in case you've been cursed by your present employer to support ancient browsers.
This allows the table to still be visually legible and functional but it doesn't exactly replicate the alternating row color effect that is present in modern browsers. If this was of paramount importance to you then you'd have to write some javascript for alternating colors to achieve this effect.
CSS Table Example with Alternating Rows
Text | Text | Text |
Text | Text | Text |
Text | Text | Text |
Text | Text | Text |
The CSS Code for the Table
To make the table above you have to use the tr:nth-child(odd) selector to define all the odd rows in a table and the tr:nth-child(even) selector to define all the even rows of the table.
The complete working CSS code and HTML for the table example can be copied from the box below.
Alternating Table Rows just with CSS
Anyways, it's now pretty simple to make a table with rows of alternating colors just by using CSS.
Modern support is good for all browsers except for IE8 and below which is now generally less than 1% of the market and so you can easily provide them with a visually readable alternative.
Most Popular Text Tools
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Alphabetical Order: Alphabetize all sorts of text content with this tool.
- Text to HTML: Automatically change plain text into HTML paragraphs.
- HTML to Text: Remove all HTML tags, leaving only text content.
- Online Sentence Counter: Quickly count the number of sentences in your content.
- Random Choice Generator: Randomly pick a choice from a list of options.
- Reverse Text Generator: Create social media posts or any text in reverse text.
- Remove Duplicate Lines: Remove all of the identical lines in your content.
- Paragraph to Single Line: Convert any multiple paragraphs to a single line.
Alphabetical Tools
Random Generators
- Random Word Generator
- Random Sentence Generator
- Random Noun Generator
- Random Adjectives Generator
- Random String Generator
- Random Letter Generator
- Random Decision Maker
- Random Number Generator
- Random Password Generator
- Random Choice Generator
Line Break Tools
Fun Text Tools
- Reverse Text
- Fake Word Generator
- Repeat Text Generator
- Tiny Text Generator
- Cursive Text Generator
- Bold Text Generator
Text Changing Tools
- Capitalize the First letter of Sentences
- Uppercase or Lowercase Text
- Remove Spaces Online
- Capitalize Each Word
- Remove Numbers from Text
SEO and Word Tools
- Word Counter
- Sentence Counter Online
- Character Counter
- Title Capitalization Tool
- Meta Description Length Checker
Content Conversion Tools
- Convert a Word Doc to HTML
- Convert Word Doc to Text
- Convert Plain Text to HTML
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML to Text
HTML Code Generators
- HTML Table Generator
- HTML List Generator
- HTML Text Generator
- Javascript Pop-up Window Maker
- Email HTML Code
- Remove HTML Tags