Striped and hover tables in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>.table-striped</code> class do in a Bootstrap table?

It adds alternating background colors to the table rows, making it easier to read across rows.

beginner

What effect does the <code>.table-hover</code> class add to a Bootstrap table?

It highlights a table row with a background color when you move your mouse pointer over it.

beginner

How do you combine striped rows and hover effect in a Bootstrap table?

Add both .table-striped and .table-hover classes to the <table> element.

beginner

Why is using striped and hover tables helpful for users?

Striped rows help users follow data across the table easily, and hover effect shows which row is currently focused, improving readability and navigation.

beginner

Which HTML element should have the Bootstrap classes .table-striped and .table-hover applied?

The <table> element itself should have these classes to style all its rows properly.

Which Bootstrap class adds alternating background colors to table rows?

A .table-hover

B .table-responsive

C .table-bordered

D .table-striped

The .table-striped class adds alternating background colors to rows.

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

A Highlights a row on mouse hover

B Adds borders around the table

C Makes the table responsive

D Changes font size

The .table-hover class highlights a row when you hover the mouse over it.

How do you apply both striped rows and hover effect to a Bootstrap table?

A Add .table-hover only

B Add both .table-striped and .table-hover classes

C Add .table-striped only

D Add .table-bordered

You add both .table-striped and .table-hover classes to get both effects.

Where should you add the .table-striped and .table-hover classes?

A On each <tr> element

B On the <td> elements

C On the <table> element

D On the <tbody> element

These classes are added to the element to style all rows.

Why are striped and hover effects useful in tables?

A They improve readability and user focus

B They change font colors

C They add animations

D They make tables smaller

Striped rows and hover effects help users read and focus on table data easily.

Explain how to create a Bootstrap table with both striped rows and hover effect. Include which classes to use and where to apply them.

Think about the classes that control row colors and mouse interaction.

Describe why using striped and hover effects in tables helps users when reading data.

Consider how visual cues help eyes track information.