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.
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.
- 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
- Email HTML Code
- Remove HTML Tags