Striped and hover tables in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What visual effect does the .table-striped class add to a Bootstrap table?

Look at a Bootstrap table with the .table-striped class applied. What will you see when the table is rendered in a browser?

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>Carol</td></tr>
  </tbody>
</table>

A Table header cells become bold and underlined.

B Rows alternate background colors, making every other row shaded differently.

C Rows highlight with a color when hovered by the mouse pointer.

D Table borders become thicker and darker.

💡 Hint

Think about how to make reading rows easier by changing backgrounds.

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

❓ rendering

intermediate

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

Given a Bootstrap table with the .table-hover class, what visual effect will you see when you move your mouse over the rows?

Bootsrap

<table class="table table-hover">
  <thead>
    <tr><th>ID</th><th>City</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Paris</td></tr>
    <tr><td>2</td><td>London</td></tr>
    <tr><td>3</td><td>Tokyo</td></tr>
  </tbody>
</table>

A Table header cells become clickable buttons.

B Rows have alternating background colors by default.

C Rows change background color when hovered by the mouse pointer.

D Table rows become bold when clicked.

💡 Hint

Hover means moving the mouse over something.

The .table-hover class highlights the row background on mouse hover, helping users track which row they are pointing at.

❓ selector

advanced

Which CSS selector does Bootstrap use internally to apply the hover effect for .table-hover?

Bootstrap applies a background color on table rows when hovered using a CSS selector. Which selector correctly targets the rows inside a table with .table-hover?

A .table-hover tbody tr:hover

B .table-hover tr:hover

C tbody tr:hover

D .table-hover > tr:hover

💡 Hint

Think about which rows inside the table body get hovered.

Bootstrap uses the selector .table-hover tbody tr:hover to apply hover styles only to rows inside the table body, not headers or footers.

❓ layout

advanced

How do .table-striped and .table-hover classes interact when both are applied to a Bootstrap table?

If you add both .table-striped and .table-hover classes to a Bootstrap table, what will be the combined visual effect?

Bootsrap

<table class="table table-striped table-hover">
  <thead>
    <tr><th>#</th><th>Item</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Pen</td></tr>
    <tr><td>2</td><td>Notebook</td></tr>
    <tr><td>3</td><td>Eraser</td></tr>
  </tbody>
</table>

A Rows alternate background colors, but hover effect changes text color instead of background.

B Only the striped effect works; hover effect is ignored.

C Only the hover effect works; striped rows are not visible.

D Rows alternate background colors, and the hovered row changes background color on mouse hover.

💡 Hint

Both classes add different background color effects.

When both classes are used, rows have alternating backgrounds, and the hovered row changes background color on mouse hover, combining both effects.

❓ accessibility

expert

Which ARIA role and attribute best improve accessibility for a Bootstrap table with striped and hover effects?

To make a Bootstrap table with .table-striped and .table-hover accessible for screen readers and keyboard users, which ARIA role and attribute combination is most appropriate?

Bootsrap

<table class="table table-striped table-hover" ... >
  ...
</table>

A Add <code>role="grid"</code> and <code>aria-rowcount</code> to indicate row count.

B Add <code>aria-live="polite"</code> to announce row changes dynamically.

C Add <code>role="presentation"</code> to hide the table from assistive tech.

D Add <code>role="list"</code> to treat the table as a list.

💡 Hint

Think about roles that describe tables and their structure.

Using role="grid" helps assistive technologies understand the table as a grid of data, and aria-rowcount informs about the number of rows, improving navigation and context.