Small and compact tables in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What does this Bootstrap table look like?

Look at this Bootstrap table code. What visual style will it produce in the browser?

Bootsrap

<table class="table table-sm">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

A A small, compact table with reduced padding in cells.

B A table with striped rows alternating colors.

C A table with borders around every cell.

D A large table with extra padding in cells and big text.

💡 Hint

The class 'table-sm' in Bootstrap makes tables smaller by reducing cell padding.

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

❓ selector

intermediate

Which Bootstrap class makes a table compact?

You want to make your Bootstrap table smaller with less space inside cells. Which class should you add?

A table-sm

B table-hover

C table-striped

D table-bordered

💡 Hint

Look for the class that changes padding size.

'table-sm' is the Bootstrap class that reduces cell padding to make tables compact.

🧠 Conceptual

advanced

Why use small and compact tables in web design?

What is the main benefit of using small and compact tables in a webpage layout?

A They make tables responsive by stacking rows on small screens.

B They add colorful borders to make tables more attractive.

C They automatically sort table data alphabetically.

D They improve readability by reducing white space and fitting more data on screen.

💡 Hint

Think about how space and data display relate.

Small and compact tables reduce padding and white space, allowing more data to fit on screen and improving readability especially on dense data views.

📝 Syntax

advanced

Identify the error in this Bootstrap table code for compact style

This code tries to create a small Bootstrap table but has a mistake. What is the error?

Bootsrap

<table class="table small">
  <thead>
    <tr><th>Item</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Pen</td><td>$1</td></tr>
  </tbody>
</table>

A The <thead> tag cannot be used with Bootstrap tables.

B The table tag is missing the closing </table> tag.

C The class 'small' is not a Bootstrap table class for compact tables.

D The <tbody> tag should come before <thead>.

💡 Hint

Bootstrap uses a specific class name for small tables.

Bootstrap uses 'table-sm' to make tables compact, not 'small'. Using 'small' alone does not apply the compact style.

❓ accessibility

expert

How to make a small Bootstrap table accessible?

You have a small Bootstrap table. What is the best way to improve its accessibility for screen readers?

Bootsrap

<table class="table table-sm">
  <caption>Product quantities</caption>
  <thead>
    <tr><th scope="col">Product</th><th scope="col">Qty</th></tr>
  </thead>
  <tbody>
    <tr><td>Notebook</td><td>5</td></tr>
  </tbody>
</table>

A Remove the <thead> section to simplify the table.

B Add <caption> describing the table content.

C Use only <div> elements instead of <table> for better accessibility.

D Add inline styles to increase font size.

💡 Hint

Think about how screen readers understand tables.

Adding a element provides a clear description of the table's purpose, helping screen reader users understand the data context.