HTMLmarkup~30 mins

Cell merging in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Creating a Table with Merged Cells

📖 Scenario: You are making a simple webpage to show a weekly schedule. Some activities last multiple days, so you want to merge table cells to show this clearly.

🎯 Goal: Build an HTML table that uses colspan and rowspan to merge cells, making the schedule easy to read.

📋 What You'll Learn

Create a table with 3 rows and 4 columns

Merge two cells horizontally using colspan

Merge two cells vertically using rowspan

Use semantic HTML with <table>, <thead>, <tbody>, <tr>, <th>, and <td>

Include a lang attribute in the <html> tag and a charset meta tag

💡 Why This Matters

🌍 Real World

Tables with merged cells are common in schedules, calendars, and reports to show grouped or spanning information clearly.

💼 Career

Knowing how to use colspan and rowspan is essential for web developers to create clear, accessible data tables in websites and apps.

Progress0 / 4 steps

Create the basic HTML table structure

Write the basic HTML5 page structure with lang="en" in the <html> tag and a <meta charset="UTF-8"> inside the <head>. Inside the <body>, create a <table> with a header row (<thead>) containing four column headers: Day 1, Day 2, Day 3, and Day 4. Then add an empty body section (<tbody>) with no rows yet.

HTML




    
    Weekly Schedule


    
        
            
                Day 1
                Day 2
                Day 3
                Day 4

Need a hint?

Remember to add lang="en" in the <html> tag and a <meta charset="UTF-8"> inside <head>. Then create a table with a header row containing four <th> cells for the days.

Add the first row with a merged cell horizontally

Inside the <tbody>, add a table row (<tr>) with three cells. The first cell should have the text Meeting and use colspan="2" to span across Day 1 and Day 2 columns. Then add two more cells with texts Work and Break for Day 3 and Day 4 respectively.

HTML




    
    Weekly Schedule


    
        
            
                Day 1
                Day 2
                Day 3
                Day 4

Need a hint?

Use colspan="2" inside the first <td> to merge two columns horizontally. Then add two more <td> cells for the other days.

Add the second row with a merged cell vertically

Add a second table row inside <tbody>. The first cell should have the text Workshop and use rowspan="2" to span vertically across this row and the next. Then add three more cells with texts Study, Exercise, and Rest for Day 2, Day 3, and Day 4 respectively.

HTML




    
    Weekly Schedule


    
        
            
                Day 1
                Day 2
                Day 3
                Day 4
            
        
        
            
                Meeting
                Work
                Break

Need a hint?

Use rowspan="2" in the first <td> of the new row to merge cells vertically. Then add three more <td> cells for the other days.

Add the third row to complete the vertical merge

Add a third table row inside <tbody>. Since the first cell is merged vertically from the previous row, add only three cells with texts Review, Plan, and Relax for Day 2, Day 3, and Day 4 respectively.

HTML




    
    Weekly Schedule


    
        
            
                Day 1
                Day 2
                Day 3
                Day 4
            
        
        
            
                Meeting
                Work
                Break
            
            
                Workshop
                Study
                Exercise
                Rest

Need a hint?

Since the first cell is merged vertically, add only three <td> cells in this row for the remaining days.