Bird
Raised Fist0
Tailwindmarkup~30 mins

Row spanning in Tailwind - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Table with Row Spanning Using Tailwind CSS
📖 Scenario: You are building a simple schedule table for a conference. Some sessions last longer and should span multiple rows in the table.
🎯 Goal: Build an HTML table styled with Tailwind CSS where one cell spans two rows using the row-span-2 utility.
📋 What You'll Learn
Use a semantic <table> with <thead> and <tbody> sections
Create three columns: Time, Session, and Speaker
Use Tailwind CSS classes for styling the table and cells
Make the first session cell span two rows using the Tailwind class row-span-2
Ensure the table is responsive and accessible with proper scope attributes on headers
💡 Why This Matters
🌍 Real World
Tables with row spanning are common in schedules, timetables, and reports where some data covers multiple rows.
💼 Career
Knowing how to use Tailwind CSS utilities for layout and accessibility is valuable for frontend developers building clean, responsive interfaces.
Progress0 / 4 steps
1
Create the basic HTML table structure
Write the HTML code to create a <table> element with a <thead> containing a single row of three headers: Time, Session, and Speaker. Then add an empty <tbody> below it.
Tailwind
Hint

Start by creating a table with a header row containing the three column titles. Use <thead> and <tbody> tags for structure.

2
Add the first two rows with row spanning
Inside the <tbody>, add two rows. In the first row, create three cells: 09:00 - 10:00 for Time, Opening Keynote for Session, and Jane Doe for Speaker. Make the Session cell span two rows by adding the Tailwind class row-span-2. In the second row, add cells for Time 10:00 - 11:00 and Speaker John Smith only (no Session cell here because it is spanned).
Tailwind
Hint

Use row-span-2 on the Session cell in the first row to make it cover two rows. The second row should not have a Session cell.

3
Add a third row without row spanning
Add a third row inside the <tbody> with three cells: 11:00 - 12:00 for Time, Workshop for Session, and Emily Clark for Speaker. Do not use any row spanning here.
Tailwind
Hint

Add a new row with three cells for the last session. Do not add any row-span classes here.

4
Add responsive and accessibility improvements
Add the Tailwind class table-auto to the <table> element to make it responsive. Also, ensure each header cell in <thead> has the scope="col" attribute for accessibility.
Tailwind
Hint

Add the table-auto class to the <table> tag for better responsiveness. Make sure all header cells have scope="col" for screen readers.

Practice

(1/5)
1. What does the Tailwind class row-span-3 do inside a grid container?
easy
A. Makes the grid item span 3 rows vertically.
B. Makes the grid item span 3 columns horizontally.
C. Adds 3 rows of padding inside the grid item.
D. Sets the grid item height to 3 rem.

Solution

  1. Step 1: Understand the row-span-{n} class

    This class controls how many rows a grid item covers vertically.

  2. Step 2: Apply row-span-3 meaning

    The number 3 means the item will cover 3 rows in the grid layout.

  3. Final Answer:

    Makes the grid item span 3 rows vertically. -> Option A

  4. Quick Check:

    row-span-3 = span 3 rows [OK]
Hint: Remember: row-span controls vertical coverage [OK]
Common Mistakes:
  • Confusing row-span with column-span
  • Thinking it adds padding or margin
  • Assuming it sets fixed height
2. Which of these is the correct Tailwind syntax to make a grid item span 2 rows?
easy
A. col-span-2
B. row-span-2
C. row-span2
D. span-row-2

Solution

  1. Step 1: Recall Tailwind's row spanning syntax

    The correct format uses a dash: row-span-{number}.

  2. Step 2: Check each option

    Only row-span-2 matches the correct syntax for spanning 2 rows.

  3. Final Answer:

    row-span-2 -> Option B

  4. Quick Check:

    Correct syntax = row-span-2 [OK]
Hint: Use dash between 'row-span' and number [OK]
Common Mistakes:
  • Using col-span instead of row-span
  • Missing dash between words and number
  • Reversing order of words
3. Given this HTML snippet inside a grid container:
<div class="grid grid-rows-4 grid-cols-2 gap-2">
  <div class="row-span-2 bg-blue-500">A</div>
  <div class="bg-red-500">B</div>
  <div class="bg-green-500">C</div>
  <div class="bg-yellow-500">D</div>
</div>

How many rows tall will the blue box labeled 'A' appear?
medium
A. 1 row tall
B. 3 rows tall
C. 4 rows tall
D. 2 rows tall

Solution

  1. Step 1: Identify the row-span class on the blue box

    The blue box has row-span-2, meaning it covers 2 rows vertically.

  2. Step 2: Understand grid rows count

    The grid has 4 rows total, but the blue box only spans 2 of them.

  3. Final Answer:

    2 rows tall -> Option D

  4. Quick Check:

    row-span-2 means 2 rows [OK]
Hint: Look for row-span number to find height in rows [OK]
Common Mistakes:
  • Assuming it spans all rows
  • Confusing rows with columns
  • Ignoring the row-span class
4. You wrote this code but the grid item does not span multiple rows:
<div class="grid grid-rows-3 grid-cols-3">
  <div class="row-span3 bg-purple-400">Item</div>
</div>

What is the error?
medium
A. Missing dash in row-span3, should be row-span-3.
B. Grid container needs grid-flow-row to enable spanning.
C. The grid must have grid-rows-4 to allow spanning 3 rows.
D. The item needs col-span-3 instead of row-span.

Solution

  1. Step 1: Check the row-span class syntax

    The class is written as row-span3 but Tailwind requires a dash: row-span-3.

  2. Step 2: Understand the effect of syntax error

    Without the dash, Tailwind ignores the class, so no spanning happens.

  3. Final Answer:

    Missing dash in row-span3, should be row-span-3. -> Option A

  4. Quick Check:

    Correct syntax needs dash [OK]
Hint: Always include dash between 'row-span' and number [OK]
Common Mistakes:
  • Forgetting the dash in class names
  • Assuming grid-rows count limits spanning
  • Confusing row-span with col-span
5. You want a grid layout with 3 columns and 4 rows. The first item should cover the first 2 rows and 2 columns. Which Tailwind classes correctly achieve this?
hard
A. grid grid-cols-2 grid-rows-4; item: row-span-2 col-span-3
B. grid grid-cols-4 grid-rows-3; item: row-span-2 col-span-2
C. grid grid-cols-3 grid-rows-4; item: row-span-2 col-span-2
D. grid grid-cols-3 grid-rows-4; item: row-span-3 col-span-1

Solution

  1. Step 1: Set grid container with 3 columns and 4 rows

    The container needs grid-cols-3 and grid-rows-4 to match the layout.

  2. Step 2: Make the item span 2 rows and 2 columns

    Use row-span-2 for vertical spanning and col-span-2 for horizontal spanning.

  3. Final Answer:

    grid grid-cols-3 grid-rows-4; item: row-span-2 col-span-2 -> Option C

  4. Quick Check:

    Correct grid + row-span-2 + col-span-2 [OK]
Hint: Match grid size, then span rows and columns as needed [OK]
Common Mistakes:
  • Mixing up grid-cols and grid-rows numbers
  • Using wrong span numbers for item
  • Forgetting to span columns when needed
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