Cell merging in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this table with merged cells?

Look at this HTML table code. What will you see in the browser?

HTML

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

A A and C merged horizontally in the first row, B in the second row.

B A in the first column spanning two rows, B and C stacked vertically in the second column.

C A and B in the first row, C in a new row but under A.

D A, B, and C all in one row horizontally.

💡 Hint

Remember, rowspan merges cells vertically.

The cell with rowspan="2" merges vertically across two rows, so 'A' covers the first column in both rows. 'B' and 'C' appear in the second column stacked vertically.

❓ rendering

intermediate

What does colspan="3" do in this table?

Check this table code. What will the first row look like in the browser?

HTML

<table border="1">
  <tr>
    <td colspan="3">Header</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

A The first row has three cells labeled 'Header', 'Header', 'Header'.

B The first row has three separate cells labeled 'Header', '2', and '3'.

C The first row has one cell spanning across three columns labeled 'Header'.

D The first row has one cell labeled 'Header' but only spans one column.

💡 Hint

colspan merges cells horizontally.

The cell with colspan="3" stretches across three columns, so the entire first row is one big cell labeled 'Header'.

📝 Syntax

advanced

What error does this table code cause?

This HTML snippet tries to merge cells but has a mistake. What error or problem will happen?

HTML

<table border="1">
  <tr>
    <td colspan="2">X</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

A The second row has fewer cells than the first, causing layout issues.

B The browser shows an extra empty cell in the second row.

C The table renders normally with no visible error.

D The browser throws a syntax error and does not render the table.

💡 Hint

Count columns in each row after merging.

The first row has 3 columns total (colspan=2 plus one cell). The second row has only 2 cells, so the table layout is uneven and may cause rendering issues.

❓ accessibility

advanced

Which attribute improves accessibility for merged table cells?

When merging cells in a table, which attribute helps screen readers understand the table structure better?

A aria-colspan

B aria-rowspan

C tabindex

D scope

💡 Hint

This attribute defines the cell's role as header for rows or columns.

The 'scope' attribute on elements tells screen readers if the header applies to a row, column, or group, improving accessibility especially with merged cells.

❓ selector

expert

Which CSS selector targets all cells merged horizontally with colspan?

You want to style all table cells that have a colspan attribute. Which CSS selector works?

A td[colspan]

B td.colspan

C td#colspan

D td::colspan

💡 Hint

Attribute selectors use square brackets.

The selector td[colspan] selects all elements with a colspan attribute, regardless of its value.