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 Sentence Generator: Create random sentences for creative brainstorming.
- Random Number Generator: Generate some random numbers in a specific number range.
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Choice Generator: Let this tool make a random decision for you.
- Reverse Text Generator: create social media posts or text messages in reverse or mirrored text
- 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.
- Random Decision Maker: Generate a random decision with this app.
- 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.
- Remove Duplicate Lines: Remove duplicate lines from a text file.
- HTML Compression: Compress HTML contents into a smaller size.
The Newest Tools by Category
Text Fixing Tools
- Remove Line Breaks
- Add Line Breaks Online
- Remove Duplicate Lines
- Paragraph to Single Line
- Remove Extra Whitespaces
- Uppercase or Lowercase Text
- Unscramble Letters to Make Words
HTML Coding Tools
- Remove HTML Tags from a String
- HTML Text Generator
- HTML List Generator
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML Character Encoding Tool
Word & Language Tools
- Word Counter
- Title Capitalization Tool
- Page Title and Description Letter Counter
- List of Common Words
- Plural Noun Generator
- Random Nouns Generator
- Random Letter Generator