Small and compact tables in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the table smaller and compact using Bootstrap classes.

Bootsrap

<table class="table [1]">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

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

Atable-sm

Btable-bordered

Ctable-lg

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-lg which makes the table larger.

Using table-bordered which adds borders but does not change size.

Using table-striped which adds stripes but does not change size.

The table-sm class in Bootstrap makes the table smaller and more compact by reducing cell padding.

2fill in blank

medium

Complete the code to add a Bootstrap class that makes the table rows striped for better readability.

Bootsrap

<table class="table [1]">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.5</td>
    </tr>
  </tbody>
</table>

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

Atable-bordered

Btable-striped

Ctable-sm

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-bordered which adds borders but no stripes.

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

Using table-sm which changes size but not stripes.

The table-striped class adds alternating background colors to table rows, improving readability.

3fill in blank

hard

Fix the error by completing the code to make the table compact and striped using Bootstrap classes.

Bootsrap

<table class="table [1] [2]">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</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

Using table-hover instead of table-striped.

Using only one class instead of both.

Using table-bordered which adds borders but not stripes or compactness.

Use table-sm to make the table compact and table-striped to add striped rows.

4fill in blank

hard

Fill both blanks to create a small, striped table with hover effect using Bootstrap classes.

Bootsrap

<table class="table [1] [2] table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pen</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Notebook</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

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

Atable-sm

Btable-bordered

Ctable-striped

Dtable-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-bordered which adds borders but not stripes or compactness.

Using table-responsive which controls responsiveness but not size or stripes.

Not including both classes.

table-sm makes the table compact, and table-striped adds striped rows. The table-hover class is already included for hover effect.

5fill in blank

hard

Fill all three blanks to create a small, striped, bordered table with hover effect using Bootstrap classes.

Bootsrap

<table class="table [1] [2] [3] table-hover">
  <thead>
    <tr>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Paris</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Tokyo</td>
      <td>Japan</td>
    </tr>
  </tbody>
</table>

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

Atable-sm

Btable-bordered

Ctable-striped

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using table-hover again as a blank even though it is already in the code.

Missing one of the required classes.

Using classes that do not affect size, borders, or stripes.

Use table-sm for a compact table, table-bordered to add borders, and table-striped for striped rows. The table-hover class is already included for hover effect.

Practice

1. What does the Bootstrap class table-sm do when added to a table?

easy

A. Makes the table smaller and more compact by reducing padding

B. Changes the table background color to gray

C. Adds borders around each table cell

D. Makes the table text bold and larger

Solution

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

   The table-sm class in Bootstrap reduces the padding inside table cells, making the table smaller and more compact.

2. Step 2: Compare with other options

   Other options describe unrelated styles like background color, borders, or text size, which table-sm does not control.

3. Final Answer:

   Makes the table smaller and more compact by reducing padding -> Option A

4. Quick Check:

   table-sm = smaller, compact table [OK]

Hint: Remember: 'sm' means small and compact table padding [OK]

Common Mistakes:

• Confusing table-sm with color or border classes
• Thinking it changes font size or weight
• Assuming it adds table stripes or hover effects

2. Which is the correct way to apply a small and compact style to a Bootstrap table?

easy

A. <table class='table compact'>

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

C. <table class='table small-table'>

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

Solution

1. Step 1: Identify Bootstrap's official class for small tables

   Bootstrap uses table-sm to make tables small and compact, not table-small, small-table, or compact.

2. Step 2: Verify syntax correctness

   The correct syntax includes both table and table-sm classes inside the class attribute.

3. Final Answer:

   <table class='table table-sm'> -> Option D

4. Quick Check:

   Use table-sm with table class [OK]

Hint: Always pair table-sm with table class [OK]

Common Mistakes:

• Using incorrect class names like 'table-small' or 'compact'
• Forgetting to include the base 'table' class
• Misspelling the class name as 'table sm'

3. What will be the visual difference when rendering this table with Bootstrap classes?

<table class='table table-sm'>
  <tr><td>Item</td><td>Price</td></tr>
  <tr><td>Apple</td><td>$1</td></tr>
</table>

medium

A. The table cells have less padding, making the table more compact

B. The table text will be italicized

C. The table will have a blue background

D. The table rows will have alternating colors

Solution

1. Step 1: Understand the effect of table-sm on table cells

   The table-sm class reduces the padding inside each cell, making the table appear smaller and more compact.

2. Step 2: Check other options for unrelated styles

   Italic text, background color, or striped rows are not caused by table-sm but by other classes like table-striped or custom CSS.

3. Final Answer:

   The table cells have less padding, making the table more compact -> Option A

4. Quick Check:

   table-sm = less padding, compact table [OK]

Hint: Less padding means smaller, tighter table cells [OK]

Common Mistakes:

• Assuming table-sm changes text style or colors
• Confusing with striped or hover effects
• Expecting background color changes

4. You wrote this code but the table is not compact:

<table class='table small'>
  <tr><td>Name</td><td>Age</td></tr>
  <tr><td>John</td><td>30</td></tr>
</table>

What is the error?

medium

A. The table tag is missing a closing tag

B. The class should be table-sm, not small

C. The table rows need tbody wrapper

D. The table cells should use th instead of td

Solution

1. Step 1: Check the class name for compact tables

   The class small is not a valid Bootstrap class for tables. The correct class to make tables compact is table-sm.

2. Step 2: Verify other code parts

   The table tag is properly closed, tbody is optional, and td is valid for data cells. These are not errors causing lack of compactness.

3. Final Answer:

   The class should be table-sm, not small -> Option B

4. Quick Check:

   Use table-sm for compact tables [OK]

Hint: Use exact class table-sm, not 'small' [OK]

Common Mistakes:

• Using 'small' instead of 'table-sm'
• Thinking missing tbody breaks compact style
• Confusing td and th roles

5. You want a table that is small and compact but also has striped rows and hover effect. Which is the correct class combination?

hard

A. table table-small striped hover

B. table-sm table-striped table-hover

C. table table-sm table-striped table-hover

D. table compact striped hover

Solution

1. Step 1: Identify required Bootstrap classes

   Bootstrap requires the base table class plus modifiers like table-sm for small tables, table-striped for striped rows, and table-hover for hover effect.

2. Step 2: Check each option for correctness

   Only table table-sm table-striped table-hover includes all correct classes with proper prefixes. The other options miss the base table class or use invalid class names.

3. Final Answer:

   table table-sm table-striped table-hover -> Option C

4. Quick Check:

   Combine table with all needed modifiers [OK]

Hint: Always include base table class with modifiers [OK]

Common Mistakes:

• Omitting the base table class
• Using invalid class names like 'table-small' or 'compact'
• Forgetting to add hover or striped classes properly