Odd and even row styling in Tailwind - Mini Project: Build & Apply

Odd and Even Row Styling with Tailwind CSS

📖 Scenario: You are creating a simple webpage that shows a list of fruits in a table. You want to make the table easier to read by coloring the odd rows light gray and the even rows white.

🎯 Goal: Build an HTML table with 5 fruit names and use Tailwind CSS classes to style odd rows with a light gray background and even rows with a white background.

📋 What You'll Learn

Create an HTML table with a header row and 5 fruit rows

Use Tailwind CSS classes to style odd rows with bg-gray-100

Use Tailwind CSS classes to style even rows with bg-white

Ensure the table is responsive and accessible with proper semantic tags

💡 Why This Matters

🌍 Real World

Tables are common in websites to show lists or data. Styling odd and even rows differently helps users read data easily.

💼 Career

Knowing how to use Tailwind CSS for table styling and accessibility is useful for frontend web development jobs.

1

Create the HTML table structure

Write the HTML code to create a table with a <thead> containing a header row with the column title Fruit. Then add a <tbody> with 5 rows, each containing one fruit name: Apple, Banana, Cherry, Date, and Elderberry.

Tailwind

  
    
      Fruit
    
  
  
    
  

Need a hint?

Use <thead> for the header and <tbody> for the fruit rows. Each fruit goes inside a <td> inside a <tr>.

2

Add Tailwind CSS base classes for table styling

Add Tailwind CSS classes to the <table> tag to make the table full width with w-full, add a border with border, and make the text left aligned with text-left.

Tailwind

  
  
    
      Fruit
    
  
  
    Apple
    Banana
    Cherry
    Date
    Elderberry
  

Need a hint?

Add the classes w-full, border, and text-left inside the class attribute of the <table> tag.

3

Add odd and even row background colors using Tailwind

Add Tailwind CSS classes to the <tbody> tag to style odd rows with odd:bg-gray-100 and even rows with even:bg-white.

Tailwind

  
    
      Fruit
    
  
  
    
    Apple
    Banana
    Cherry
    Date
    Elderberry
  

Need a hint?

Add the classes odd:bg-gray-100 and even:bg-white inside the class attribute of the <tbody> tag.

4

Add accessibility and responsive design enhancements

Add the scope="col" attribute to the <th> tag for accessibility. Also, wrap the table inside a <div> with the Tailwind class overflow-x-auto to make it horizontally scrollable on small screens.

Tailwind

  
  
    
      
        Fruit 
      
    
    
      Apple
      Banana
      Cherry
      Date
      Elderberry
    
  

Need a hint?

Wrap the table in a <div> with class overflow-x-auto. Add scope="col" inside the <th> tag.