Can someone explain the whole colspan thing? Heres my problem. I need a table with 3 columns going across and one somewhat in the middle. It’s hard to explain with just text, and me not knowing the effect very well, it’s extra hard. Here’s a small diagram.
The thing with tables is that you need to be able to represent the entire table (no matter what its final form) in a grid. From that grid you can then combine those grid spaces, or cells, to be one cell. So what you have there is essentially a 3x2 grid. 3 columns and 2 rows. The rwos in the first and third columns, however, are combined. Simple enough right? This combination is where the colspan (and rowspan) comes into play though.
Because tables are grids at their core, for those cells to be combined, a certain cell needs to be extended into and more or less replace the cell its being merged with. This means it needs to span the distance between its current position and its merged cell’s position. This spanning means it will then stretch across multiple rows or columns, dpending on the direction of the cell(s) its being combined with (i.e. to the left or right or above or below).
In your example you would want the first and third cell in the first row to span down into the second row - a rowspan. Because they’re taking up now two rows, its own and the second (to replace the lower cell), those two cells would have a rowspan of 2. In terms of coding, its just the property in the cell td tag. The code for the replaced cells is just omitted.
Base Table
<table border="0">
<tr>
<!-- [first row - three columns] -->
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- [second row - three columns] -->
<td></td>
<td></td>
<td></td>
</tr>
</table>
Formatted table
<table border="0">
<tr>
<!-- [first row - three columns] -->
<td rowspan="2"></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<!-- [second row - three columns] -->
<!-- [2 columns taken care of from row 1 and rowspan] -->
<!-- omitted: <td></td> -->
<td></td>
<!-- omitted: <td></td> -->
</tr>
</table>