Odd and even row styling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the correct Tailwind class for odd row background

Which Tailwind CSS class applies a background color only to odd rows in a table?

Tailwind

<table class="table-auto w-full">
  <tbody>
    <tr class="?">
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

A row-odd:bg-gray-100

B odd:bg-gray-100

C bg-odd-gray-100

D even:bg-gray-100

💡 Hint

Tailwind uses the keyword 'odd' to target odd-numbered rows.

The class 'odd:bg-gray-100' applies the gray background only to odd rows. 'even:bg-gray-100' targets even rows. Other options are invalid Tailwind syntax.

❓ layout

intermediate

Effect of odd and even row styling on table readability

Why is applying different background colors to odd and even rows helpful in tables?

A It improves readability by visually separating rows.

B It makes the table load faster in browsers.

C It changes the font size of the table text.

D It hides even rows from view.

💡 Hint

Think about how your eyes follow lines in a list.

Alternating row colors help users track data across the row easily, improving readability. It does not affect loading speed, font size, or visibility.

📝 Syntax

advanced

Identify the invalid Tailwind class for even row styling

Which of these Tailwind classes will NOT correctly apply a background color to even rows?

A even:bg-blue200

B odd:bg-blue-200

C even:bg-blue-300

D even:bg-blue-200

💡 Hint

Tailwind uses dashes to separate color names and numbers.

Option A is invalid because 'blue200' lacks the dash between 'blue' and '200'. Tailwind requires the dash for color shades. Other options are valid classes.

❓ rendering

advanced

Result of applying odd:bg-green-100 and even:bg-yellow-100 on table rows

What will you see when a table has rows styled with 'odd:bg-green-100' and 'even:bg-yellow-100' classes?

Tailwind

<table class="table-auto w-full">
  <tbody>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 1</td></tr>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 2</td></tr>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 3</td></tr>
    <tr class="odd:bg-green-100 even:bg-yellow-100"><td>Row 4</td></tr>
  </tbody>
</table>

A All rows have a light green background.

B All rows have a light yellow background.

C No background colors are applied to any rows.

D Odd rows have a light green background; even rows have a light yellow background.

💡 Hint

Odd and even classes apply different styles to different rows.

The 'odd:bg-green-100' applies a light green background to odd rows, and 'even:bg-yellow-100' applies a light yellow background to even rows, creating alternating colors.

❓ accessibility

expert

Accessibility considerations for odd and even row styling

Which practice ensures odd and even row background colors are accessible for users with color blindness?

A Use only red and green colors for odd and even rows.

B Use very light colors that are barely visible to avoid distraction.

C Use colors with sufficient contrast and combine with other cues like borders or stripes.

D Avoid any background colors and rely only on text color changes.

💡 Hint

Think about how people with different vision perceive colors.

Good accessibility means using colors with enough contrast and adding other visual cues like borders or patterns so everyone can distinguish rows, including those with color blindness.