Basic table styling in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual effect of .table-striped in Bootstrap?

Look at a Bootstrap table with the .table-striped class applied. What do you see?

Bootsrap

<table class="table table-striped">
  <thead>
    <tr><th>#</th><th>Name</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Alice</td></tr>
    <tr><td>2</td><td>Bob</td></tr>
    <tr><td>3</td><td>Charlie</td></tr>
  </tbody>
</table>

A Rows alternate background color, making every other row shaded.

B Table borders become thicker and darker.

C Text in the table becomes bold and larger.

D Table header row is hidden from view.

💡 Hint

Think about how alternating colors help you read rows easier.

The .table-striped class adds a subtle background color to every other row. This helps users follow rows horizontally without losing track.

❓ selector

intermediate

Which Bootstrap class adds borders to all table cells?

You want every cell in your Bootstrap table to have visible borders. Which class do you add?

A .table-striped

B .table-hover

C .table-responsive

D .table-bordered

💡 Hint

Borders mean lines around cells.

The .table-bordered class adds borders around all table cells, making the grid lines visible.

🧠 Conceptual

advanced

What does the .table-hover class do in Bootstrap tables?

Consider a Bootstrap table with the .table-hover class. What happens when you move your mouse over the rows?

A The text in the row becomes italicized on hover.

B The entire table becomes hidden when hovered.

C The row under the mouse pointer highlights with a background color.

D The table header changes color when hovered.

💡 Hint

Hover means moving the mouse over something.

The .table-hover class highlights the row under the mouse pointer with a subtle background color, improving readability.

❓ accessibility

advanced

Which attribute improves accessibility for Bootstrap tables?

To help screen readers understand your table, which attribute should you add to the <table> element?

A aria-hidden="true"

B role="table"

C tabindex="-1"

D contenteditable="true"

💡 Hint

Screen readers use roles to identify elements.

Adding role="table" explicitly tells assistive technologies that this element is a table, improving accessibility.

❓ layout

expert

How does .table-responsive affect Bootstrap tables on small screens?

You add .table-responsive around your table. What happens when viewing on a narrow mobile screen?

Bootsrap

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr><th>#</th><th>Name</th><th>Age</th><th>City</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>30</td><td>New York</td></tr>
      <tr><td>2</td><td>Bob</td><td>25</td><td>Chicago</td></tr>
    </tbody>
  </table>
</div>

A The table becomes horizontally scrollable, preventing content from squishing.

B The table columns stack vertically like a list.

C The table hides columns that don't fit on screen.

D The table font size automatically shrinks to fit the screen.

💡 Hint

Think about how you can see wide tables on small phones.

The .table-responsive class wraps the table in a container that allows horizontal scrolling on small screens, preserving layout and readability.