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.