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.

Practice

(1/5)

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

easy

A. Adds alternating background colors to table rows for easier reading.

B. Highlights the row when you hover the mouse over it.

C. Makes the table borders thicker.

D. Changes the font style of the table text.

Solution

1. Step 1: Understand the purpose of table-striped

   The table-striped class adds alternating background colors to rows, making it easier to read data across the table.

2. Step 2: Differentiate from other classes

   The table-hover class highlights rows on mouse hover, which is different from table-striped.

3. Final Answer:

   Adds alternating background colors to table rows for easier reading. -> Option A

4. Quick Check:

   Striped = alternating row colors [OK]

Hint: Striped means alternating colors on rows [OK]

Common Mistakes:

• Confusing striped with hover effect
• Thinking it changes font or borders
• Assuming it highlights on mouse hover

2. Which is the correct way to add both striped and hover effects to a Bootstrap table?

easy

A. <table class='table-striped-hover'>

B. <table class='table-hover table-striped'>

C. <table class='striped hover'>

D. <table class='table table-striped table-hover'>

Solution

1. Step 1: Check Bootstrap class syntax

   Bootstrap requires the base table class plus additional classes separated by spaces, like table-striped and table-hover.

2. Step 2: Validate correct class order and spelling

   <table class='table table-striped table-hover'> correctly uses class='table table-striped table-hover'. Order doesn't matter but all classes must be present and spelled correctly.

3. Final Answer:

   <table class='table table-striped table-hover'> -> Option D

4. Quick Check:

   Use base table plus both classes [OK]

Hint: Always include base 'table' class with modifiers [OK]

Common Mistakes:

• Omitting the base 'table' class
• Combining classes without spaces
• Using incorrect class names

3. Given this HTML snippet, what visual effect will the table have?

<table class='table table-striped table-hover'>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

medium

A. Rows alternate background colors and highlight on mouse hover.

B. Rows have no background color but highlight on mouse hover.

C. Rows alternate background colors but do not highlight on hover.

D. Table has no special background or hover effects.

Solution

1. Step 1: Identify classes used

   The table uses table-striped and table-hover classes together.

2. Step 2: Understand combined effects

   table-striped adds alternating row colors, and table-hover highlights the row under the mouse pointer.

3. Final Answer:

   Rows alternate background colors and highlight on mouse hover. -> Option A

4. Quick Check:

   Striped + Hover = alternating colors + highlight [OK]

Hint: Both classes combine their effects visually [OK]

Common Mistakes:

• Thinking only one effect applies
• Ignoring hover effect
• Confusing hover with striped effect

4. What is wrong with this table code if the hover effect does not work?

<table class='table table-striped hover'>
  <tr><td>Data</td></tr>
</table>

medium

A. The table-striped class disables hover effect.

B. The table class is missing.

C. The class should be table-hover, not just hover.

D. Hover effect requires JavaScript to work.

Solution

1. Step 1: Check class names

   The class hover alone is not a valid Bootstrap class for hover effect.

2. Step 2: Correct class for hover effect

   The correct class is table-hover, which must be used with the base table class.

3. Final Answer:

   The class should be table-hover, not just hover. -> Option C

4. Quick Check:

   Hover effect needs table-hover class [OK]

Hint: Hover class must be 'table-hover' exactly [OK]

Common Mistakes:

• Using 'hover' instead of 'table-hover'
• Omitting 'table' base class
• Assuming hover needs JavaScript

5. You want a table that has striped rows, highlights on hover, and also makes the header row stand out with a dark background. Which is the best way to achieve this using Bootstrap classes?

hard

A. <table class='table table-striped table-hover'> <thead class='table-header-dark'> ... </thead> </table>

B. <table class='table table-striped table-hover'> <thead class='table-dark'> ... </thead> </table>

C. <table class='table table-striped table-hover'> <thead class='thead-dark'> ... </thead> </table>

D. <table class='table table-striped table-hover table-dark'> ... </table>

Solution

1. Step 1: Combine striped and hover classes on table

   Use table-striped and table-hover with the base table class for row effects.

2. Step 2: Use correct class for dark header

   Bootstrap uses table-dark on the <thead> element to style the header with a dark background.

3. Step 3: Verify other options

   table-dark on the whole table changes entire table style, not just header. thead-dark is deprecated in Bootstrap 5+. table-header-dark is not a valid class.

4. Final Answer:

   <table class='table table-striped table-hover'> <thead class='table-dark'> ... </thead> </table> -> Option B

5. Quick Check:

   Use table-dark on thead for dark header [OK]

Hint: Dark header uses 'table-dark' on thead element [OK]

Common Mistakes:

• Applying 'table-dark' to whole table instead of header
• Using deprecated 'thead-dark' class
• Inventing non-existent classes like 'table-header-dark'

Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard

Practice

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

easy

A. Adds alternating background colors to table rows for easier reading.

B. Highlights the row when you hover the mouse over it.

C. Makes the table borders thicker.

D. Changes the font style of the table text.

Solution

1. Step 1: Understand the purpose of table-striped

   The table-striped class adds alternating background colors to rows, making it easier to read data across the table.

2. Step 2: Differentiate from other classes

   The table-hover class highlights rows on mouse hover, which is different from table-striped.

3. Final Answer:

   Adds alternating background colors to table rows for easier reading. -> Option A

4. Quick Check:

   Striped = alternating row colors [OK]

Hint: Striped means alternating colors on rows [OK]

Common Mistakes:

• Confusing striped with hover effect
• Thinking it changes font or borders
• Assuming it highlights on mouse hover

2. Which is the correct way to add both striped and hover effects to a Bootstrap table?

easy

A. <table class='table-striped-hover'>

B. <table class='table-hover table-striped'>

C. <table class='striped hover'>

D. <table class='table table-striped table-hover'>

Solution

1. Step 1: Check Bootstrap class syntax

   Bootstrap requires the base table class plus additional classes separated by spaces, like table-striped and table-hover.

2. Step 2: Validate correct class order and spelling

   <table class='table table-striped table-hover'> correctly uses class='table table-striped table-hover'. Order doesn't matter but all classes must be present and spelled correctly.

3. Final Answer:

   <table class='table table-striped table-hover'> -> Option D

4. Quick Check:

   Use base table plus both classes [OK]

Hint: Always include base 'table' class with modifiers [OK]

Common Mistakes:

• Omitting the base 'table' class
• Combining classes without spaces
• Using incorrect class names

3. Given this HTML snippet, what visual effect will the table have?

<table class='table table-striped table-hover'>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

medium

A. Rows alternate background colors and highlight on mouse hover.

B. Rows have no background color but highlight on mouse hover.

C. Rows alternate background colors but do not highlight on hover.

D. Table has no special background or hover effects.

Solution

1. Step 1: Identify classes used

   The table uses table-striped and table-hover classes together.

2. Step 2: Understand combined effects

   table-striped adds alternating row colors, and table-hover highlights the row under the mouse pointer.

3. Final Answer:

   Rows alternate background colors and highlight on mouse hover. -> Option A

4. Quick Check:

   Striped + Hover = alternating colors + highlight [OK]

Hint: Both classes combine their effects visually [OK]

Common Mistakes:

• Thinking only one effect applies
• Ignoring hover effect
• Confusing hover with striped effect

4. What is wrong with this table code if the hover effect does not work?

<table class='table table-striped hover'>
  <tr><td>Data</td></tr>
</table>

medium

A. The table-striped class disables hover effect.

B. The table class is missing.

C. The class should be table-hover, not just hover.

D. Hover effect requires JavaScript to work.

Solution

1. Step 1: Check class names

   The class hover alone is not a valid Bootstrap class for hover effect.

2. Step 2: Correct class for hover effect

   The correct class is table-hover, which must be used with the base table class.

3. Final Answer:

   The class should be table-hover, not just hover. -> Option C

4. Quick Check:

   Hover effect needs table-hover class [OK]

Hint: Hover class must be 'table-hover' exactly [OK]

Common Mistakes:

• Using 'hover' instead of 'table-hover'
• Omitting 'table' base class
• Assuming hover needs JavaScript

5. You want a table that has striped rows, highlights on hover, and also makes the header row stand out with a dark background. Which is the best way to achieve this using Bootstrap classes?

hard

A. <table class='table table-striped table-hover'> <thead class='table-header-dark'> ... </thead> </table>

B. <table class='table table-striped table-hover'> <thead class='table-dark'> ... </thead> </table>

C. <table class='table table-striped table-hover'> <thead class='thead-dark'> ... </thead> </table>

D. <table class='table table-striped table-hover table-dark'> ... </table>

Solution

1. Step 1: Combine striped and hover classes on table

   Use table-striped and table-hover with the base table class for row effects.

2. Step 2: Use correct class for dark header

   Bootstrap uses table-dark on the <thead> element to style the header with a dark background.

3. Step 3: Verify other options

   table-dark on the whole table changes entire table style, not just header. thead-dark is deprecated in Bootstrap 5+. table-header-dark is not a valid class.

4. Final Answer:

   <table class='table table-striped table-hover'> <thead class='table-dark'> ... </thead> </table> -> Option B

5. Quick Check:

   Use table-dark on thead for dark header [OK]

Hint: Dark header uses 'table-dark' on thead element [OK]

Common Mistakes:

• Applying 'table-dark' to whole table instead of header
• Using deprecated 'thead-dark' class
• Inventing non-existent classes like 'table-header-dark'