Bootsrapmarkup~30 mins

Bordered and borderless tables in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bordered and Borderless Tables with Bootstrap

📖 Scenario: You are creating a simple webpage to display a list of fruits and their colors. You want to show this data in tables using Bootstrap styles. One table will have borders around cells, and the other will have no borders.

🎯 Goal: Build two tables using Bootstrap classes: one with borders around all cells and one without any borders. Both tables should have a header row and three rows of fruit data.

📋 What You'll Learn

Use Bootstrap 5 classes for styling tables

Create a table with the class table-bordered to show borders

Create a table with the class table-borderless to remove borders

Include a header row with columns Fruit and Color

Add three rows of fruit data: Apple (Red), Banana (Yellow), Grape (Purple)

💡 Why This Matters

🌍 Real World

Tables are commonly used on websites to display structured data like product lists, schedules, or reports. Knowing how to style tables with borders or without borders helps make data easier to read and visually appealing.

💼 Career

Web developers often use Bootstrap to quickly style tables in dashboards, admin panels, and content pages. Understanding how to apply Bootstrap table classes is a practical skill for front-end development jobs.

Progress0 / 4 steps

Create the HTML skeleton with Bootstrap CSS link

Write the basic HTML5 structure with <!DOCTYPE html>, <html lang="en">, <head>, and <body> tags. Inside the <head>, add a <meta charset="UTF-8"> tag, a <meta name="viewport" content="width=device-width, initial-scale=1"> tag, and link the Bootstrap 5 CSS from https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css using a <link> tag.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section for styling.

Add a bordered table with fruit data

Inside the <body>, create a <table> element with the classes table and table-bordered. Add a <thead> with a row containing two headers: Fruit and Color. Then add a <tbody> with three rows for the fruits: Apple with color Red, Banana with color Yellow, and Grape with color Purple.

Bootsrap




  
  
  
  Bootstrap Tables

Need a hint?

Use table and table-bordered classes on the <table> tag. Add header and body rows with the exact fruit names and colors.

Add a borderless table with the same fruit data

Below the bordered table, add another <table> element with the classes table and table-borderless. Repeat the same header row with Fruit and Color, and the same three rows of fruit data: Apple (Red), Banana (Yellow), and Grape (Purple).

Bootsrap




  
  
  
  Bootstrap Tables


  
    
      
        Fruit
        Color
      
    
    
      
        Apple
        Red
      
      
        Banana
        Yellow
      
      
        Grape
        Purple

Need a hint?

Use the table-borderless class on the second table to remove borders. Keep the same fruit data and header structure.

Add a heading and container for better layout

Wrap both tables inside a <main> element with the Bootstrap class container for proper spacing. Above the first table, add a heading <h2> with the text Bordered Table. Above the second table, add a heading <h2> with the text Borderless Table. This will improve the page structure and readability.

Bootsrap




  
  
  
  Bootstrap Tables

Need a hint?

Use a <main> tag with class container to wrap the tables. Add <h2> headings before each table with the exact text.