Bordered and borderless tables in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a border to the table 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-striped

Btable-hover

Ctable-bordered

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'table-striped' which adds stripes, not borders.

Using 'table-hover' which adds hover effect, not borders.

The Bootstrap class 'table-bordered' adds borders to the table and its cells.

2fill in blank

medium

Complete the code to create a borderless table using Bootstrap classes.

Bootsrap

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

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

Atable-borderless

Btable-striped

Ctable-bordered

Dtable-hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'table-bordered' which adds borders instead of removing them.

Using 'table-striped' which adds stripes, not related to borders.

The Bootstrap class 'table-borderless' removes all borders from the table.

3fill in blank

hard

Fix the error in the code to correctly apply a borderless style to the table.

Bootsrap

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

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

Aborderless-table

Bborderless

Ctable-border

Dtable-borderless

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'borderless-table' which is not a Bootstrap class.

Using 'borderless' which is incomplete and invalid.

The correct Bootstrap class to remove borders is 'table-borderless'. Other options are invalid.

4fill in blank

hard

Fill both blanks to create a striped, bordered table.

Bootsrap

<table class="table [1] [2]">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

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

Atable-striped

Btable-hover

Ctable-bordered

Dtable-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'table-hover' instead of 'table-striped'.

Using 'table-sm' which changes size, not borders or stripes.

Use 'table-striped' for striped rows and 'table-bordered' for borders.

5fill in blank

hard

Fill all three blanks to create a small, borderless, hoverable table.

Bootsrap

<table class="table [1] [2] [3]">
  <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-sm

Btable-hover

Ctable-borderless

Dtable-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'table-bordered' instead of 'table-borderless'.

Using 'table-striped' which adds stripes, not hover effect.

Use 'table-sm' for small size, 'table-hover' for hover effect, and 'table-borderless' to remove borders.