Bootsrapmarkup~30 mins

Striped and hover tables in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Striped and Hover Tables with Bootstrap

📖 Scenario: You are creating a simple webpage to display a list of fruits and their colors in a table. You want the table to have alternating row colors for easy reading and highlight a row when the mouse hovers over it.

🎯 Goal: Build a Bootstrap table that shows fruit names and their colors with striped rows and hover effect.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a table with two columns: Fruit and Color

Add exactly 5 fruits with their colors

Make the table striped using Bootstrap classes

Add a hover effect on table rows using Bootstrap classes

Use semantic HTML and include necessary meta tags for responsiveness

💡 Why This Matters

🌍 Real World

Tables with striped rows and hover effects are common in dashboards, reports, and data presentation on websites to improve readability and user experience.

💼 Career

Knowing how to use Bootstrap classes for tables is a valuable skill for front-end developers and web designers working on professional websites and applications.

Progress0 / 4 steps

Create the basic HTML structure with Bootstrap CSS

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and a viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <main> element with a <table> element having the class table. The table should have a header row with two columns: Fruit and Color. Do not add any table rows yet.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link in the <head> section and create a table with class table.

Add a configuration class for striped rows

Add the Bootstrap class table-striped to the existing <table> element to enable alternating row colors.

Bootsrap




    
    
    Striped and Hover Table
    


    
        
            
                
                    Fruit
                    Color

Need a hint?

Add the class table-striped inside the class attribute of the <table> tag.

Add table rows with fruit names and colors

Inside the <tbody>, add exactly five <tr> rows. Each row should have two <td> cells: the first with the fruit name and the second with its color. Use these exact pairs in order: Apple - Red, Banana - Yellow, Grapes - Purple, Orange - Orange, Kiwi - Green.

Bootsrap




    
    
    Striped and Hover Table
    


    
        
            
                
                    Fruit
                    Color

Need a hint?

Make sure to add exactly five <tr> rows with two <td> cells each inside the <tbody>.

Add hover effect to the table rows

Add the Bootstrap class table-hover to the <table> element along with the existing classes to enable row highlight on mouse hover.

Bootsrap




    
    
    Striped and Hover Table
    


    
        
            
                
                    Fruit
                    Color
                
            
            
                AppleRed
                BananaYellow
                GrapesPurple
                OrangeOrange
                KiwiGreen

Need a hint?

Add the class table-hover inside the class attribute of the <table> tag along with the other classes.