Cell merging in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to merge two cells horizontally using the correct attribute.

HTML

<table>
  <tr>
    <td [1]>Merged Cell</td>
    <td>Cell 2</td>
  </tr>
</table>

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

Acolspan="2"

Browspan="2"

Cspan="2"

Dmerge="2"

Attempts:

3 left

💡 Hint

Common Mistakes

Using rowspan instead of colspan

Using an invalid attribute like 'merge'

Using 'span' without 'col' or 'row'

The colspan attribute merges cells horizontally by spanning columns.

2fill in blank

medium

Complete the code to merge two cells vertically using the correct attribute.

HTML

<table>
  <tr>
    <td [1]>Merged Cell</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

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

Aspan="2"

Browspan="2"

Ccolspan="2"

Dmerge="2"

Attempts:

3 left

💡 Hint

Common Mistakes

Using colspan instead of rowspan

Using an invalid attribute like 'merge'

Using 'span' without 'col' or 'row'

The rowspan attribute merges cells vertically by spanning rows.

3fill in blank

hard

Fix the error in the code to correctly merge two cells horizontally.

HTML

<table>
  <tr>
    <td [1]>Merged Cell</td>
    <td>Cell 2</td>
  </tr>
</table>

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

Acolspan= "2"

Bcolspan=2

Ccolspan='2'

Dcolspan="2"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around attribute value

Using single quotes inconsistently

Adding spaces inside the attribute value

HTML attributes must have values in quotes. colspan="2" is correct syntax.

4fill in blank

hard

Fill both blanks to merge a cell vertically and horizontally.

HTML

<table>
  <tr>
    <td [1] [2]>Merged Cell</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

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

Arowspan="2"

Bcolspan="2"

Cspan="2"

Dmerge="2"

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid attributes like 'span' or 'merge'

Mixing up rowspan and colspan

Omitting quotes around attribute values

Use rowspan="2" to merge vertically and colspan="2" to merge horizontally.

5fill in blank

hard

Fill all three blanks to create a table with a cell merged vertically and two cells merged horizontally.

HTML

<table>
  <tr>
    <td [1]>Vertical Merge</td>
    <td [2]>Horizontal Merge</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td [3]>Merged Cell</td>
  </tr>
</table>

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

Arowspan="2"

Bcolspan="2"

Ccolspan="1"

Drowspan="1"

Attempts:

3 left

💡 Hint

Common Mistakes

Using colspan for vertical merge

Using rowspan for horizontal merge

Using colspan="1" or rowspan="1" which does not merge

The first cell uses rowspan="2" to merge vertically. The second and last cells use colspan="2" to merge horizontally.

Practice

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