Table and data grid patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic table with Tailwind CSS classes.

Tailwind

<table class="min-w-full divide-y divide-gray-200">
  <thead class="bg-gray-50">
    <tr>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
    </tr>
  </thead>
  <tbody class="bg-white divide-y divide-gray-200">
    <tr>
      <td class="px-6 py-4 whitespace-nowrap">Jane Cooper</td>
      <td class="px-6 py-4 whitespace-nowrap">[1]</td>
    </tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

ASoftware Engineer

Btext-center

Cborder

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Putting a CSS class name instead of actual cell content.

Leaving the blank empty.

The blank is inside a table cell where the job title should appear. 'Software Engineer' is the correct content to fill the cell.

2fill in blank

medium

Complete the code to add a hover effect on table rows using Tailwind CSS.

Tailwind

<tbody class="bg-white divide-y divide-gray-200">
  <tr class="[1]">
    <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
    <td class="px-6 py-4 whitespace-nowrap">Product Manager</td>
  </tr>
</tbody>

Drag options to blanks, or click blank then click option'

Ahover:bg-gray-100

Btext-gray-500

Cfont-bold

Dborder-b-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using text color classes instead of hover background.

Using border classes that don't create hover effect.

The class 'hover:bg-gray-100' adds a light gray background when the user hovers over the table row.

3fill in blank

hard

Fix the error in the code to make the table responsive with horizontal scrolling.

Tailwind

<div class="overflow-x-[1]">
  <table class="min-w-full divide-y divide-gray-200">
    <!-- table content -->
  </table>
</div>

Drag options to blanks, or click blank then click option'

Ascroll

Bhidden

Cauto

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'overflow-x-scroll' which always shows scrollbar.

Using 'overflow-x-hidden' which hides overflow content.

The class 'overflow-x-auto' enables horizontal scrolling when the table is wider than its container, making it responsive.

4fill in blank

hard

Fill both blanks to create a striped table with alternating row colors.

Tailwind

<tbody class="bg-white divide-y-0 divide-gray-200 [1]">
  <tr class="[2]">
    <td class="px-6 py-4 whitespace-nowrap">Alice Smith</td>
    <td class="px-6 py-4 whitespace-nowrap">Designer</td>
  </tr>
  <tr class="[2]">
    <td class="px-6 py-4 whitespace-nowrap">Bob Johnson</td>
    <td class="px-6 py-4 whitespace-nowrap">Developer</td>
  </tr>
</tbody>

Drag options to blanks, or click blank then click option'

Adivide-y-0

Bbg-gray-50

Codd:bg-white

Deven:bg-gray-50

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving dividing lines which breaks the striped look.

Using odd:bg-white which is default and doesn't create stripes.

Removing the dividing lines with 'divide-y-0' and using 'even:bg-gray-50' on rows creates a striped effect with alternating background colors.

5fill in blank

hard

Fill all three blanks to create a table header with sticky position and shadow.

Tailwind

<thead class="bg-gray-50 [1] [2] [3]">
  <tr>
    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
  </tr>
</thead>

Drag options to blanks, or click blank then click option'

Asticky

Btop-0

Cshadow-md

Dz-10

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting 'top-0' which is needed with 'sticky'.

Using 'z-10' which controls layering but is not required here.

The classes 'sticky' and 'top-0' make the header stick to the top when scrolling, and 'shadow-md' adds a subtle shadow for separation.

Practice

1. What is the main purpose of using tables in web pages with Tailwind CSS?

easy

A. To create animations and transitions

B. To add background images to the page

C. To organize data in rows and columns for easy reading

D. To handle user input forms

Solution

1. Step 1: Understand the role of tables

   Tables are designed to display data in a structured way using rows and columns.

2. Step 2: Recognize Tailwind CSS usage

   Tailwind CSS helps style these tables but does not change their purpose.

3. Final Answer:

   To organize data in rows and columns for easy reading -> Option C

4. Quick Check:

   Tables = organize data [OK]

Hint: Tables show data in rows and columns [OK]

Common Mistakes:

• Confusing tables with animations
• Thinking tables handle user input
• Assuming tables add images

2. Which Tailwind CSS class adds a border around table cells?

easy

A. border-collapse

B. text-center

C. table-auto

D. border

Solution

1. Step 1: Identify border classes

   The class border adds a border to elements, including table cells.

2. Step 2: Differentiate from other classes

   border-collapse controls border merging, table-auto sets table layout, and text-center aligns text.

3. Final Answer:

   border -> Option D

4. Quick Check:

   Border around cells = border [OK]

Hint: Use 'border' class for cell borders [OK]

Common Mistakes:

• Using border-collapse instead of border
• Confusing layout classes with border
• Using text alignment classes for borders

3. What will be the visual effect of this Tailwind CSS snippet on a table?

<div class="overflow-x-auto">
  <table class="min-w-full border border-gray-300">
    <thead>
      <tr><th class="border p-2">Name</th><th class="border p-2">Age</th></tr>
    </thead>
    <tbody>
      <tr><td class="border p-2">Alice</td><td class="border p-2">30</td></tr>
    </tbody>
  </table>
</div>

medium

A. A full-width table with borders and horizontal scroll on small screens

B. A table without borders and no scrolling

C. A table with vertical scrolling only

D. A table with no padding inside cells

Solution

1. Step 1: Analyze container class

   The overflow-x-auto on the div allows horizontal scrolling if the table is wider than the screen.

2. Step 2: Analyze table and cell classes

   The table has min-w-full making it at least full width, and border classes add visible borders. Padding p-2 adds space inside cells.

3. Final Answer:

   A full-width table with borders and horizontal scroll on small screens -> Option A

4. Quick Check:

   overflow-x-auto + border = scroll + borders [OK]

Hint: overflow-x-auto enables horizontal scroll [OK]

Common Mistakes:

• Ignoring overflow-x-auto effect
• Confusing vertical and horizontal scroll
• Missing that borders are added by border class

4. Identify the error in this Tailwind CSS table code snippet:

<table class="table-auto border-collapse border border-gray-400">
  <thead>
    <tr>
      <th class="border p-4">ID</th>
      <th class="border p-4">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border p-4">1</td>
      <td class="border p-4">85</td>
    </tr>
  </tbody>
</table>

medium

A. Missing overflow-x-auto on the table container

B. Using both border-collapse and border on the table causes double borders

C. Padding p-4 is too small for table cells

D. Table tag is missing a closing tag

Solution

1. Step 1: Understand border-collapse effect

   The border-collapse class merges adjacent borders into one, but adding border on the table itself can cause unexpected double borders.

2. Step 2: Check other options

   Overflow-x-auto is optional, padding p-4 is reasonable, and the table tag is properly closed.

3. Final Answer:

   Using both border-collapse and border on the table causes double borders -> Option B

4. Quick Check:

   border-collapse + border on table = double borders [OK]

Hint: Avoid border on table with border-collapse [OK]

Common Mistakes:

• Thinking overflow-x-auto is required always
• Assuming p-4 is too small
• Missing that table tag is closed

5. You want to create a responsive data grid with Tailwind CSS that: - Has a fixed header row - Allows horizontal scrolling on small screens - Uses alternating row colors for readability Which combination of Tailwind classes and structure should you use?

hard

A. <div class="overflow-x-auto max-h-64"><table class="min-w-full border-collapse border border-gray-300"><thead class="sticky top-0 bg-white">...</thead><tbody class="divide-y divide-gray-200">...</tbody></table></div>

B. <table class="table-fixed border border-gray-400"><thead>...</thead><tbody>...</tbody></table>

C. <div class="overflow-y-auto"><table class="min-w-full border border-gray-300"><thead>...</thead><tbody>...</tbody></table></div>

D. <div class="overflow-x-auto"><table class="min-w-full border border-gray-300"><thead>...</thead><tbody><tr class="bg-gray-100">...</tr></tbody></table></div>

Solution

1. Step 1: Enable horizontal scrolling and fixed header

   The overflow-x-auto on the container allows horizontal scroll. The sticky top-0 on thead fixes the header row on scroll.

2. Step 2: Add alternating row colors

   The divide-y divide-gray-200 on tbody creates visible row separators for readability.

3. Step 3: Confirm other classes

   min-w-full ensures full width, and border-collapse merges borders nicely.

4. Final Answer:

   Option A code snippet with overflow-x-auto, sticky header, and divide-y -> Option A

5. Quick Check:

   Sticky header + scroll + row divide = <div class="overflow-x-auto max-h-64"><table class="min-w-full border-collapse border border-gray-300"><thead class="sticky top-0 bg-white">...</thead><tbody class="divide-y divide-gray-200">...</tbody></table></div> [OK]

Hint: Use sticky thead and overflow-x-auto container [OK]

Common Mistakes:

• Missing sticky class for fixed header
• Using overflow-y-auto instead of overflow-x-auto
• Not adding row dividers for readability