Row spanning in Tailwind - Mini Project: Build & Apply

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.

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

  
    
      Time
      Session
      Speaker
    
  
  
    
  

Need a 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

  
    
      Time
      Session
      Speaker
    
  
  
    
  

Need a 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

  
    
      Time
      Session
      Speaker
    
  
  
    
      09:00 - 10:00
      Opening Keynote
      Jane Doe
    
    
      10:00 - 11:00
      John Smith
    
    
  

Need a 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

  
  
    
      Time
      Session
      Speaker
    
  
  
    
      09:00 - 10:00
      Opening Keynote
      Jane Doe
    
    
      10:00 - 11:00
      John Smith
    
    
      11:00 - 12:00
      Workshop
      Emily Clark
    
  

Need a hint?

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