Using "COLSPAN" and "ROWSPAN" to make your life truly miserable!
When we last left off we were tantalizingly close to doing something really useful with a table. Combining cells within the table structure to accommodate graphics or other items that might otherwise mess up our carefully planned page design.
This is our original nine cell table from tutorial 1:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
Taking our nine cell table we'll use ROWSPAN first to join Cell 1 and Cell 4 into a single, taller cell. The table looks like this:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
Oops! Bimjo! Whazzupwidat? Well, because we told Cell 1 to be tall and span 2 rows and there are still 3 cells in Row 2, everything gets shoved to the right. How do we fix it? We just remove the cell code for Cell 4 (or cell 6, your choice- I deleted cell 4 here). The corrected table looks like this:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 5 | Cell 6 | |
| Cell 7 | Cell 8 | Cell 9 |
Now, this is the slightly confusing part. Rows are horizontal elements, they go from side-to-side within the table. To make a cell taller you span the horizontal element Row. Inversely to make a cell wider than its contemporaries you span the vertical element Column by using the COLSPAN. Thoroughly confused? I know, it seems bass-ackwards but it's really the way it works. Let's make one of our cells wider by spanning two columns. Looks like this:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 5 | Cell 6 | |
| Cell 7 | Cell 8 | Cell 9 |
Oh no!, Not again! Well, yep, we did it again. Like when we used ROWSPAN, using COLSPAN in an existing table causes things to shift. Because we really wanted to join Cell 5 and Cell 6 we need to remove the code for Cell 6 to make things line up correctly again. The properly coded table really looks like this:
| Cell 1 | Cell 2 | Cell 3 |
| Cell 5 | ||
| Cell 7 | Cell 8 | Cell 9 |
There, that looks a bit better. Here's the code for this final version of our nine cell table:
<table cellpadding="2" border="3">
<tr>
<td bgcolor="#FFFF00" ROWSPAN="2">Cell 1</td>
<td bgcolor="#FFFF00">Cell 2</td>
<td bgcolor="#FFFF00">Cell 3</td>
</tr>
<tr>
<td bgcolor="#FFFF00" COLSPAN="2">Cell 5 </td>
</tr>
<tr>
<td bgcolor="#FFFF00">Cell 7</td>
<td bgcolor="#FFFF00">Cell 8</td>
<td bgcolor="#FFFF00">Cell 9</td>
</tr>
</table>
Notice that there are now actually only 7 cells instead of 9 cells in our table. Row 2 now only contains one cell (the original Cell 5) Cell 1 now replaces the original Cell 1 and Cell 4. I left the rowspan and colspan tags uppercase to make them stand out and easier to see. Wasn't that nice of me?
Okay, now let's see what else we can do with our little table. How about... no border?
|
|
|||||||||||||||||
Okay, what's the difference between the two tables above? The one one the left has no border, nor does the one on the right. But the one on the left has gaps in it. Why is that? Because from the beginning I added a background color in each cell, but not in the table itself. The table on the right has the same yellow color added to background of the entire table.
Please note that this effect is browser specific. It may not work in your browser. It works in IE 4.0, it doesn't seem to work in NS 4.0, but it does work in NS 6.x the new Mozilla browser...<SHRUG>
In case you're wondering how I got those two tables to sit side-by-side, I used a nested table structure. Tables can be placed within other tables to create even more interesting and complex layouts for your data. But that's another topic to be covered in the next tutorial.