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