Bird
Raised Fist0
HTMLmarkup~30 mins

Cell merging in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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
1
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
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.

2
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
Hint

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

3
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
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.

4
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
Hint

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

Practice

(1/5)
1. What does the colspan attribute do in an HTML table?
easy
A. It merges cells horizontally across columns.
B. It merges cells vertically across rows.
C. It changes the color of a cell.
D. It adds a border around a cell.

Solution

  1. Step 1: Understand the purpose of colspan

    The colspan attribute is used in a table cell to make it span across multiple columns horizontally.

  2. Step 2: Compare with rowspan

    rowspan merges cells vertically across rows, so it is different from colspan.

  3. Final Answer:

    It merges cells horizontally across columns. -> Option A

  4. Quick Check:

    colspan = horizontal merge [OK]
Hint: Remember: colSpan = column span (horizontal) [OK]
Common Mistakes:
  • Confusing colspan with rowspan
  • Thinking colspan changes cell style
  • Assuming colspan merges rows
2. Which of the following is the correct syntax to merge two columns in a table cell?
easy
A. <td rowspan='2'>Merged</td>
B. <td merge='2'>Merged</td>
C. <td colspan='2'>Merged</td>
D. <td span='2'>Merged</td>

Solution

  1. Step 1: Identify the correct attribute for column merging

    The attribute to merge columns is colspan, so it should be used as colspan='2'.

  2. Step 2: Check syntax correctness

    <td colspan='2'>Merged</td> uses the correct attribute and syntax: <td colspan='2'>Merged</td>. Other options use wrong attributes or invalid syntax.

  3. Final Answer:

    <td colspan='2'>Merged</td> -> Option C

  4. Quick Check:

    Correct attribute for columns = colspan [OK]
Hint: Use colspan='number' to merge columns [OK]
Common Mistakes:
  • Using rowspan instead of colspan
  • Using non-existent attributes like merge or span
  • Missing quotes around attribute value
3. What will be the visual result of this HTML snippet?
<table border='1'>
  <tr>
    <td rowspan='2'>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>
medium
A. All cells appear in a single row.
B. Cell 'A' spans two rows vertically, cells 'B' and 'C' are side by side horizontally.
C. Cell 'A' spans two columns horizontally, cells 'B' and 'C' are below 'A'.
D. Cell 'A' spans two rows vertically, cells 'B' and 'C' are stacked vertically next to 'A'.

Solution

  1. Step 1: Understand rowspan effect

    The rowspan='2' on cell 'A' makes it cover two rows vertically in the first column.

  2. Step 2: Analyze placement of cells 'B' and 'C'

    Cell 'B' is in the first row, second column; cell 'C' is in the second row, second column. They stack vertically next to the tall 'A' cell.

  3. Final Answer:

    Cell 'A' spans two rows vertically, cells 'B' and 'C' are stacked vertically next to 'A'. -> Option D

  4. Quick Check:

    rowspan = vertical merge [OK]
Hint: Rowspan stacks cells vertically beside merged cell [OK]
Common Mistakes:
  • Thinking rowspan merges columns horizontally
  • Assuming cells B and C are side by side horizontally
  • Confusing rowspan with colspan
4. Identify the error in this table code that tries to merge cells across two columns:
<table border='1'>
  <tr>
    <td colspan='2'>Merged</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>
medium
A. Second row has only two cells but first row has three columns, causing layout mismatch.
B. The colspan attribute value should be '3' instead of '2'.
C. The colspan attribute is not allowed on td elements.
D. The table is missing a thead section.

Solution

  1. Step 1: Count columns in first row

    The first row has a cell with colspan='2' plus one more cell, so total columns = 2 + 1 = 3.

  2. Step 2: Count columns in second row

    The second row has only two cells, so only 2 columns, which causes a mismatch in table layout.

  3. Final Answer:

    Second row has only two cells but first row has three columns, causing layout mismatch. -> Option A

  4. Quick Check:

    Column count must match in all rows [OK]
Hint: Ensure all rows have same total columns after colspan [OK]
Common Mistakes:
  • Ignoring column count mismatch
  • Thinking colspan value must match total columns
  • Believing colspan is invalid on <td>
5. You want to create a table where the top-left cell spans 2 rows and 3 columns. Which is the correct way to write this cell?
hard
A. <td rowspan='3' colspan='2'>Top Left</td>
B. <td rowspan='2' colspan='3'>Top Left</td>
C. <td colspan='2' rowspan='3'>Top Left</td>
D. <td colspan='3'>Top Left</td>

Solution

  1. Step 1: Identify correct rowspan and colspan values

    The cell should span 2 rows vertically and 3 columns horizontally, so rowspan='2' and colspan='3' are needed.

  2. Step 2: Check attribute order and correctness

    Attributes can be in any order, but <td rowspan='2' colspan='3'>Top Left</td> correctly uses rowspan='2' and colspan='3'. Other options have swapped or incorrect values.

  3. Final Answer:

    <td rowspan='2' colspan='3'>Top Left</td> -> Option B

  4. Quick Check:

    Rowspan = rows, colspan = columns [OK]
Hint: Use rowspan for rows, colspan for columns together [OK]
Common Mistakes:
  • Swapping rowspan and colspan values
  • Using wrong numbers for spans
  • Omitting one of the attributes
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