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.
CSS Table Example with Alternating Rows
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.
The Most Popular Tools
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Random Number Generator: Generate some random numbers in a specific number range.
- Random Sentence Generator: Create random sentences for creative brainstorming.
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Choice Generator: Let this tool make a random decision for you.
- Convert Word to HTML: Automatically convert word contents to HTML code.
- Text to HTML: Quickly change plain text into HTML paragraphs.
- HTML to Text: Remove HTML tags, leaving only text content.
- Alphabetical Order: Alphabetize lists, or other text content with this tool.
- Capitalize the First letter of Sentences
- HTML Table Generator: Generate the code for a simple HTML table.
- Word Counter: Count the number of words in your text.
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- Remove Duplicate Lines: Remove duplicate lines from a text file.
- HTML Compression: Compress HTML contents into a smaller size.
- Random Decision Maker: Generate a random decision with this app.
- The Rules of Plural Nouns: Entertaining explanations and many plural examples
- Generating Random Words: An article about how generating random words can inspire fresh new ideas
The Newest Updates
- Remove HTML Tags from a String
- Online Sentence Counter
- Character Counter Online
- Add Line Breaks Online
- Title Capitalization Tool
- Title and Description Letter Counter
- HTML Text Generator
- HTML List Generator
- Reverse Text Generator
- Random Password Generator
- Random String Generator
- Word Counter
- List of Common Words
- Remove Extra Whitespaces
- Uppercase or Lowercase Text
- Remove Duplicate Lines
- Brainstorm a Website Name
- Plural Noun Generator
- Random Nouns Generator
- Random Adjective Generator
- HTML Character Encoding Tool
- Rules of Capitalization in English