1. Advanced Tables

2. Spanning Columns and Rows:
So far, our tables have been relatively simple, with a uniform grid of rows and columns:
XHTML allows us to create more complex table elements by spanning specified rows or columns:

3. Spanning Columns: Span 3 Columns R2C1 R2C2 R2C3 R3C1 R3C2 R3C3
<table width="300" border="1">
<tr>
<td colspan="3">Span 3 Columns</td>
</tr>
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
</table>
Span 3 Columns
R2C1
R2C2
R2C3
R3C1
R3C2
R3C3
By adding the colspan="3" to the <td> element, we are telling the browser that we want to stretch a single table cell across the space of three columns.

4. Spanning Rows: Span 3 Rows R1C2 R1C3 R2C2 R2C3 R3C2 R3C3
<table width="300" border="1">
<tr>
<td rowspan="3">Span 3 Rows</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<td>R2C2</td>
<td>R2C3</td>
<td>R3C2</td>
<td>R3C3</td>
</table>
Span 3 Rows
R1C2
R1C3
R2C2
R2C3
R3C2
R3C3
The rowspan="3" in the <td> element accomplishes the same thing, but stretches a cell across multiple rows instead.