Table Columns with Alternating Colors using CSS
By using the nth child selector in CSS3 you can create a table with columns that have alternating colors.
Further down this page I'll show you a working example and provide the necessary CSS code for adding this simple style to a table.
Browser Support for Nth Child Selector
All modern browsers such as Chrome and Firefox support the nth child but this pseudo class is not supported in Internet Explorer 8 and versions lower than eight. Because of this, I have added an extra line of CSS code so these older versions of IE will at least have a default background color for all the table cells.
This allows the table to perfectly readable and usable by visitors but it doesn't exactly replicate the alternating color columns that most of the audience will experience in their more modern browsers.
CSS Table Code Example for Alternating Columns
The CSS Column Code for this Table
To implement the html table above you would have to use the tr td:nth-child(odd) selector to define all the cells in odd columns in a table and the tr td:nth-child(even) selector to define all the cells in the even columns of a table.
The complete working CSS code and HTML for the table example can be copied from the box below.
Alternating Table Columns with CSS3 Code
As you can see, it's pretty straightforward to build a table with columns of alternating colors by using some simple CSS code.
This feature is well supported in all current browsers. In Internet Explorer 8, the nth child selector is not supported and you can easily provide this small portion of your users 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
- Add Line Breaks Online
- Title Capitalization Tool
- Title and Description Letter Counter
- HTML Text Generator
- HTML List Generator
- Reverse Text Generator
- Random Password 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