Different Style For EVEN And ODD Rows Table Columns (Table CSS)

Trang chủ » Html Css Table Column Background Color » Different Style For EVEN And ODD Rows Table Columns (Table CSS)

Có thể bạn quan tâm

IncludeHelp_logo Skip Navigation Links
  • Home
  • DS & Algo. ▾
    • Data Structure Tutorial
    • Algorithms Tutorial
    • Coding Problems
  • Languages ▾
    • C Tutorial
    • C++ Tutorial
    • C++ STL Tutorial
    • Java Tutorial
    • Python Tutorial
    • Scala Tutorial
    • Ruby Tutorial
    • C#.Net Tutorial
    • Golang Tutorial
    • Android Tutorial
    • Kotlin Tutorial
    • SQL Tutorial
  • Web. ▾
    • JavaScript Tutorial
    • CSS Tutorial
    • jQuery Tutorial
    • PHP Tutorial
    • Node.Js Tutorial
    • AdonisJs Tutorial
    • VueJS Tutorial
    • Ajax Tutorial
    • HTML Tutorial
    • Django Tutorial
  • Programs ▾
    • C Programs
    • C++ Programs
    • Data Structure Programs
    • Java Programs
    • C#.Net Programs
    • VB.Net Programs
    • Python Programs
    • PHP Programs
    • Golang Programs
    • Scala Programs
    • Swift Programs
    • Rust Programs
    • Ruby Programs
    • Kotlin Programs
    • C Interview Programs
  • Aptitude ▾
    • C Aptitude
    • C++ Aptitude
    • Java Aptitude
    • C# Aptitude
    • PHP Aptitude
    • Linux Aptitude
    • DBMS Aptitude
    • Networking Aptitude
    • AI Aptitude
    • English Grammar Aptitude
    • More...
  • Interview ▾
    • Golang Interview Questions
    • MIS Executive Interview Questions
    • DBMS Interview Questions
    • C Interview Questions
    • Embedded C Interview Questions
    • Java Interview Questions
    • SEO Interview Questions
    • HR Interview Questions
  • Find Output ▾
    • C Find O/P
    • C++ Find O/P
    • C#.Net Find O/P
    • Java Find O/P
    • Go Find O/P
    • PHP Find O/P
    • More...
  • MCQs ▾
    • Web Technologie MCQs
    • CS Subjects MCQs
    • Databases MCQs
    • Programming MCQs
    • Testing Software MCQs
    • Digital Mktg Subjects MCQs
    • Cloud Computing S/W MCQs
    • Engineering Subjects MCQs
    • Commerce MCQs
    • More MCQs...
  • CS Subjects ▾
    • ML/AI Tutorial
    • Operating System Tutorial
    • Computer Network Tutorial
    • Software Engineering Tutorial
    • Discrete Mathematics Tutorial
    • Digital Electronics Tutorial
    • Data Mining Tutorial
    • MIS Tutorial
    • DBMS Tutorial
    • Embedded Systems Tutorial
    • Cryptography Tutorial
    • CS Fundamental Tutorial
    • More Tutorials...
  • More ▾
    • Tech Articles
    • Puzzles
    • Full Forms
    • Code Examples
    • Blogs
    • Guest Post
    • Programmer's Calculator
    • XML Sitemap Generator
    • Tools & Generators
    • About
    • Contact
Skip Navigation Links
  • Home
  • DS & Algo. ▾
    • Data Structure Tutorial
    • Algorithms Tutorial
    • Coding Problems
  • Languages ▾
    • C Tutorial
    • C++ Tutorial
    • C++ STL Tutorial
    • Java Tutorial
    • Python Tutorial
    • Scala Tutorial
    • Ruby Tutorial
    • C#.Net Tutorial
    • Golang Tutorial
    • Android Tutorial
    • Kotlin Tutorial
    • SQL Tutorial
  • Web. ▾
    • JavaScript Tutorial
    • CSS Tutorial
    • jQuery Tutorial
    • PHP Tutorial
    • Node.Js Tutorial
    • AdonisJs Tutorial
    • VueJS Tutorial
    • Ajax Tutorial
    • HTML Tutorial
    • Django Tutorial
  • Programs ▾
    • C Programs
    • C++ Programs
    • Data Structure Programs
    • Java Programs
    • C#.Net Programs
    • VB.Net Programs
    • Python Programs
    • PHP Programs
    • Golang Programs
    • Scala Programs
    • Swift Programs
    • Rust Programs
    • Ruby Programs
    • Kotlin Programs
    • C Interview Programs
  • Aptitude ▾
    • C Aptitude
    • C++ Aptitude
    • Java Aptitude
    • C# Aptitude
    • PHP Aptitude
    • Linux Aptitude
    • DBMS Aptitude
    • Networking Aptitude
    • AI Aptitude
    • English Grammar Aptitude
    • More...
  • Interview ▾
    • Golang Interview Questions
    • MIS Executive Interview Questions
    • DBMS Interview Questions
    • C Interview Questions
    • Embedded C Interview Questions
    • Java Interview Questions
    • SEO Interview Questions
    • HR Interview Questions
  • Find Output ▾
    • C Find O/P
    • C++ Find O/P
    • C#.Net Find O/P
    • Java Find O/P
    • Go Find O/P
    • PHP Find O/P
    • More...
  • MCQs ▾
    • Web Technologie MCQs
    • CS Subjects MCQs
    • Databases MCQs
    • Programming MCQs
    • Testing Software MCQs
    • Digital Mktg Subjects MCQs
    • Cloud Computing S/W MCQs
    • Engineering Subjects MCQs
    • Commerce MCQs
    • More MCQs...
  • CS Subjects ▾
    • ML/AI Tutorial
    • Operating System Tutorial
    • Computer Network Tutorial
    • Software Engineering Tutorial
    • Discrete Mathematics Tutorial
    • Digital Electronics Tutorial
    • Data Mining Tutorial
    • MIS Tutorial
    • DBMS Tutorial
    • Embedded Systems Tutorial
    • Cryptography Tutorial
    • CS Fundamental Tutorial
    • More Tutorials...
  • More ▾
    • Tech Articles
    • Puzzles
    • Full Forms
    • Code Examples
    • Blogs
    • Guest Post
    • Programmer's Calculator
    • XML Sitemap Generator
    • Tools & Generators
    • About
    • Contact

Home » CSS

CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (td)

In this CSS style example, we will learn how to apply different CSS styles on EVEN and ODD Table Columns and How to highlight Table Data (Cells) on Mouse Over (hover) Events. By Anjali Singh Last updated : July 11, 2023

Different Style for EVEN and ODD Rows Table Columns (Table CSS)

CSS

<style> .tableStyle1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: auto; } /*Style for Table Head - TH*/ .tableStyle1 th { text-align: left; background-color: #006699; color: #fff; text-align: left; padding: 25px; } /*TD and TH Style*/ .tableStyle1 td, .tableStyle1 th { border: 1px solid #dedede; /*Border color*/ padding: 15px; } /*Table Even Columns Styles*/ .tableStyle1 td:nth-child(even){ background-color: #afafaf; } /*Table ODD Columns Styles*/ .tableStyle1 td:nth-child(odd){ background-color: #cfcfcf; } /*Table Column(Data) HOver Style*/ .tableStyle1 td:hover{ background-color: #e5423f; } </style>

HTML Source Code with CSS

<!--CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).--> <html> <head> <title>CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).</title> <!--Example CSS--> <link href="ExampleStyle.css" type="text/css" rel="stylesheet"/> <style> .tableStyle1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: auto; } /*Style for Table Head - TH*/ .tableStyle1 th { text-align: left; background-color: #006699; color: #fff; text-align: left; padding: 25px; } /*TD and TH Style*/ .tableStyle1 td, .tableStyle1 th { border: 1px solid #dedede; /*Border color*/ padding: 15px; } /*Table Even Columns Styles*/ .tableStyle1 td:nth-child(even){ background-color: #afafaf; } /*Table ODD Columns Styles*/ .tableStyle1 td:nth-child(odd){ background-color: #cfcfcf; } /*Table Column(Data) HOver Style*/ .tableStyle1 td:hover{ background-color: #e5423f; } </style> </head> <body> <h1>CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).</h1> <table class="tableStyle1"> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> <th>Country</th> </tr> <tr> <td>Mike</td> <td>23</td> <td>Male</td> <td>USA</td> </tr> <tr> <td>Mohit</td> <td>28</td> <td>Male</td> <td>India</td> </tr> <tr> <td>James</td> <td>31</td> <td>Male</td> <td>Canada</td> </tr> <tr> <td>Rossy</td> <td>32</td> <td>Female</td> <td>South Africa</td> </tr> </table> </body> </html>

Result:

apply different color on even odd table columns Click for DEMO →

CSS Examples »

How to set the sticky footer at the bottom of a webpage using CSS? CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Rows

Related Tutorials

  • Wildcard Selectors (*, ^ and $) in CSS
  • How to convert px into em in CSS?
  • How to remove the space between inline-block elements?
  • How to create and use CSS triangle?
  • How to horizontally center a DIV using CSS?
  • How to set the background of a text or an image as transparent using CSS?
  • CSS - Make Two DIVs Left and Right Aligned inside Main DIV
  • CSS - Make Inner DIV center inside Outer DIV
  • CSS - Create and Apply CSS for All Buttons on the Page
  • How to change an HTML5 input placeholder color with CSS?
  • How do I center <div> tag using CSS?
  • How do I hide an element when printing a web page?
  • How to Create a Modal Popup Box with CSS and JavaScript?
  • How to set the height of an image with CSS?
  • Apply style to the parent class if it has a child with CSS and HTML
Advertisement Advertisement

Comments and Discussions!

Load comments ↻

Advertisement Advertisement Advertisement
Top MCQs
  • Marketing MCQs
  • Blockchain MCQs
  • Artificial Intelligence MCQs
  • Data Analytics & Visualization MCQs
  • MIS MCQs
  • C MCQs
  • C+ MCQs
  • Python MCQs
  • Java MCQs
  • Excel MCQs
Top Programs/Examples
  • C Programs
  • C++ Programs
  • Python Programs
  • Java Programs
  • D.S. Programs
  • Golang Programs
  • C# Programs
  • JavaScript Examples
  • jQuery Examples
  • CSS Examples
Top Tutorials
  • C Tutorial
  • C++ Tutorial
  • Python Tutorial
  • ML/AI Tutorial
  • MIS Tutorial
  • Software Engineering Tutorial
  • Scala Tutorial
  • More...
About
  • About us
  • Contact us
  • Privacy policy
Student's Section
  • Internship
  • Certificates
  • Content Writers of the Month
Subscribe
  • Telegram
  • Facebook
  • LinkedIn
  • Email

Copyright © 2025 www.includehelp.com. All rights reserved.

Join us on Telegram ✖

Từ khóa » Html Css Table Column Background Color