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.