Basic table styling in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap class that makes the table have basic styling.

Bootsrap

<table class="[1]">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Atable-bordered

Btable-hover

Ctable

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using classes like table-striped or table-hover without the base table class.

Forgetting to add any class to the table element.

The table class adds basic Bootstrap styling to the table, such as borders and padding.

2fill in blank

medium

Complete the code to add a Bootstrap class that makes the table rows highlight on hover.

Bootsrap

<table class="table [1]">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Book</td>
      <td>$10</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Atable-hover

Btable-sm

Ctable-striped

Dtable-bordered

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-striped which adds stripes but no hover effect.

Forgetting to include the base table class.

The table-hover class adds a highlight effect on table rows when you move the mouse over them.

3fill in blank

hard

Fix the error by completing the class name to add borders around all table cells.

Bootsrap

<table class="table [1]">
  <thead>
    <tr>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Paris</td>
      <td>France</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Atable-striped

Btable-bordered

Ctable-hover

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-striped which only adds stripes.

Using table-hover which adds hover effect but no borders.

The table-bordered class adds borders around all cells in the table.

4fill in blank

hard

Fill both blanks to create a small, striped Bootstrap table.

Bootsrap

<table class="table [1] [2]">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pen</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Atable-sm

Btable-hover

Ctable-striped

Dtable-bordered

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up table-hover with table-striped.

Forgetting to include the base table class.

The table-sm class makes the table smaller with less padding. The table-striped class adds alternating row colors.

5fill in blank

hard

Fill all three blanks to create a responsive, bordered, and hoverable Bootstrap table.

Bootsrap

<div class="[1]">
  <table class="table [2] [3]">
    <thead>
      <tr>
        <th>Country</th>
        <th>Capital</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Japan</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  </table>
</div>

Drag options to blanks, or click blank then click option'

Atable-responsive

Btable-bordered

Ctable-hover

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Putting table-responsive on the table instead of the container div.

Mixing up table-striped with table-hover.

The table-responsive class on the container makes the table scroll horizontally on small screens. The table-bordered adds borders, and table-hover adds row highlight on hover.

Practice

1. What does adding class="table" to a <table> element in Bootstrap do?

easy

A. Adds sorting functionality to the table columns

B. Makes the table responsive automatically

C. Applies basic Bootstrap styling to the table for better appearance

D. Changes the table background color to blue

Solution

1. Step 1: Understand the role of class="table"

   This class applies Bootstrap's default styling to tables, improving their look with padding, borders, and font styles.

2. Step 2: Identify what it does not do

   It does not make tables responsive, add sorting, or change background color by default.

3. Final Answer:

   Applies basic Bootstrap styling to the table for better appearance -> Option C

4. Quick Check:

   Bootstrap table class = basic styling [OK]

Hint: Remember: table class styles tables simply [OK]

Common Mistakes:

• Thinking it makes tables responsive
• Assuming it adds sorting features
• Believing it changes background color automatically

2. Which of the following is the correct way to add striped rows to a Bootstrap table?

easy

A. <table class="table-striped-table">

B. <table class="table-striped">

C. <table class="striped">

D. <table class="table table-striped">

Solution

1. Step 1: Understand Bootstrap table classes

   The base class table must always be included for Bootstrap table styling to work.

2. Step 2: Add table-striped alongside table

   To get striped rows, both classes must be present: class="table table-striped".

3. Final Answer:

   <table class="table table-striped"> -> Option D

4. Quick Check:

   Base table + table-striped = striped rows [OK]

Hint: Always include table class first for Bootstrap tables [OK]

Common Mistakes:

• Using only table-striped without table
• Swapping class order incorrectly
• Using wrong class names like striped

3. What will be the visual effect of this code snippet?

<table class="table table-bordered">
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

medium

A. Table with no borders around cells

B. Table with borders around each cell

C. Table with striped rows

D. Table with hover effect on rows

Solution

1. Step 1: Identify the class table-bordered

   This class adds borders around all table cells and the table itself.

2. Step 2: Confirm base styling with table

   The table class applies Bootstrap's basic styling, so the table looks neat with borders.

3. Final Answer:

   Table with borders around each cell -> Option B

4. Quick Check:

   table-bordered = borders on cells [OK]

Hint: Borders come from table-bordered class [OK]

Common Mistakes:

• Confusing table-bordered with table-striped
• Expecting hover effect without table-hover
• Ignoring the need for base table class

4. You wrote this code but the table has no Bootstrap styling:

<table class="table-striped">
  <tr><td>Data</td></tr>
</table>

What is the error?

medium

A. Missing table class alongside table-striped

B. Wrong tag used instead of <table>

C. Class name should be striped-table

D. Bootstrap CSS file is not linked

Solution

1. Step 1: Check the classes on the table

   The class table-striped alone does not apply Bootstrap styling; it must be combined with table.

2. Step 2: Confirm the correct class usage

   Correct usage is class="table table-striped" to get both base styling and striped rows.

3. Final Answer:

   Missing table class alongside table-striped -> Option A

4. Quick Check:

   Always include table class for Bootstrap tables [OK]

Hint: Always pair table-striped with table [OK]

Common Mistakes:

• Using only table-striped without table
• Assuming wrong class names
• Not linking Bootstrap CSS (though not asked here)

5. You want a table with basic Bootstrap styling, striped rows, and hover effect on rows. Which is the correct class attribute?

hard

A. class="table table-striped table-hover"

B. class="table-striped table-hover"

C. class="table-hover table-striped"

D. class="table table-hover-striped"

Solution

1. Step 1: Include the base table class

   This is required for any Bootstrap table styling to work.

2. Step 2: Add table-striped and table-hover classes

   These add striped rows and hover effect respectively. Both must be separate classes.

3. Step 3: Check class order and spelling

   Order does not matter but all classes must be spelled correctly and separated by spaces.

4. Final Answer:

   class="table table-striped table-hover" -> Option A

5. Quick Check:

   Base table + stripes + hover = class="table table-striped table-hover" [OK]

Hint: Combine all classes with spaces, always include table [OK]

Common Mistakes:

• Omitting the base table class
• Combining classes incorrectly like table-hover-striped
• Wrong class order or missing spaces