Advanced Tables

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:

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.

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.