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

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.

1

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

Hint

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

2

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


  

Hint

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

3

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
      
    
  

  

Hint

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

4

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


  

Hint

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

Practice

1. What does the Bootstrap class table-bordered do to a table?

easy

A. Changes the table background color

B. Removes all borders from the table

C. Adds borders around all table cells

D. Makes the table text bold

Solution

1. Step 1: Understand the purpose of table-bordered

   This class adds visible borders around each cell in the table to separate data clearly.

2. Step 2: Compare with other classes

   Unlike table-borderless which removes borders, table-bordered adds them for clarity.

3. Final Answer:

   Adds borders around all table cells -> Option C

4. Quick Check:

   table-bordered means borders added [OK]

Hint: Borders mean table-bordered, no borders mean table-borderless [OK]

Common Mistakes:

• Confusing table-bordered with background color changes
• Thinking it removes borders instead of adding
• Assuming it changes text style

2. Which is the correct way to make a Bootstrap table borderless?

easy

A. <table class='table table-borderless'>

B. <table class='borderless-table'>

C. <table class='table borderless'>

D. <table class='table table-bordered'>

Solution

1. Step 1: Recall Bootstrap borderless table class

   The correct class to remove borders is table-borderless used alongside table.

2. Step 2: Check syntax correctness

   <table class='table table-borderless'> uses class='table table-borderless', which is the proper Bootstrap syntax.

3. Final Answer:

   <table class='table table-borderless'> -> Option A

4. Quick Check:

   Borderless table uses table-borderless [OK]

Hint: Use table-borderless with table class for no borders [OK]

Common Mistakes:

• Using only borderless without table
• Confusing table-bordered with borderless
• Misspelling the class name

3. What will be the visual difference between these two tables?

<table class='table table-bordered'>...</table>
and
<table class='table table-borderless'>...</table>

medium

A. The first table has borders; the second has no borders

B. Both tables will have thick borders around cells

C. Both tables will have no borders

D. The second table will have colored borders

Solution

1. Step 1: Understand table-bordered effect

   This class adds visible borders around all table cells.

2. Step 2: Understand table-borderless effect

   This class removes all borders, making the table look clean without lines.

3. Final Answer:

   The first table has borders; the second has no borders -> Option A

4. Quick Check:

   Bordered vs borderless means borders vs no borders [OK]

Hint: Bordered means lines; borderless means no lines [OK]

Common Mistakes:

• Assuming borderless still shows borders
• Thinking both tables look the same
• Confusing border color with border presence

4. You wrote this code but the table still shows borders:

<table class='table borderless'>
  <tr><td>Data</td></tr>
</table>

What is the error?

medium

A. Table tag is missing closing tag

B. Missing table-borderless class; used borderless instead

C. You need to add table-bordered to remove borders

D. The tr tag is incorrect

Solution

1. Step 1: Check class names for borderless table

   The correct class to remove borders is table-borderless, not just borderless.

2. Step 2: Verify HTML structure

   The table tag is properly closed and tr is correct, so no errors there.

3. Final Answer:

   Missing table-borderless class; used borderless instead -> Option B

4. Quick Check:

   Use exact Bootstrap class table-borderless [OK]

Hint: Use full class table-borderless, not partial names [OK]

Common Mistakes:

• Using incomplete or wrong class names
• Confusing table-bordered with borderless
• Ignoring proper closing tags

5. You want a table with borders only around the entire table but no borders between cells. Which Bootstrap classes should you use?

hard

A. table table-bordered

B. table table-borderless

C. border border-1

D. table border

Solution

1. Step 1: Understand Bootstrap border classes

   table-bordered adds borders around all cells, not just the table.

2. Step 2: Use border on table only

   Bootstrap's border class adds border around the element itself. Combined with table, it provides table styling with border only around the table and no cell borders.

3. Step 3: Why other options fail

   Options B and D add or remove all cell borders. border border-1 adds border but lacks table styling. table border is correct.

4. Final Answer:

   table border -> Option D

5. Quick Check:

   Border on table only needs table border [OK]

Hint: Use table border for outer table border only [OK]

Common Mistakes:

• Assuming table-bordered only borders table edges
• Omitting the table class and using only border utilities
• Confusing cell borders with table border