Advanced HTML Tables

Learn to create complex tables in HTML by merging cells across multiple columns and rows using `colspan` and `rowspan`.

Advanced Tables: Spanning Cells

Sometimes, you need a single table cell to stretch across multiple columns or rows. HTML provides two powerful attributes for this: `colspan` and `rowspan`.

Spanning Columns (colspan)

The colspan attribute is used on a <th> or <td> element to make it span across multiple columns. The value indicates how many columns the cell should occupy.

Spanning Rows (rowspan)

The rowspan attribute is used on a <th> or <td> element to make it span vertically across multiple rows. The value indicates the number of rows the cell should occupy.

Practice Zone


Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

<table border='1'>
<th colspan='2'>Header</th>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</table>

Completa el código:

______
______
______
______
______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<table>
  <tr>
    <th >Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td >30</td>
  </tr>
</table>

Practice Example: Code Editor

Create a table where a header cell spans two columns and a data cell spans two rows.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<table border="1"> <tr> <th colspan="2">Combined Header</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td rowspan="2">Combined Cell</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table>

Knowledge Check

Which attribute is used to combine cells vertically in an HTML table?