HTML: A Guide to Hard-Coding
More on Page Layout Using Tables
Rowspan is a bit harder because you have to be careful that you take away cells <td> from the appropriate row.
For example, if I have a rowspan of 2, this means that the cell is going to dip down into the next row and affect the number of cells in that row.
We wanted to have a navigational column on the left side, so lets put that in.
I had to take out a cell in row three because the first cell of row two dipped down into row three.
The hardest thing about using rowspan and colspan is counting to make sure you have the correct number of cells. One way to check your work is to use a border on your table and then take it away when you have completed your page. This way you can see where you have miscounted.
Let's now combine all the remaining cells (6, 7, 8, 10, 11, 12) into one big cell.
This means that we will need to use rowspan and colspan together.
Cell number six will have to have a colspan of three and a rowspan of two.
I combined the cells with rowspan and colspan, took out the last row because there weren't any cells in it, gave the table an exact height and width, and got this:
This doesn't look exactly like what we were after. This is because of the amount of data in the cells. Since the cells are much larger than the actual data, the browser arbitrarily decides how wide and high to make the cells.
We need to tell the browser exactly how high and wide to make the cells.
Let's start with the row with the one in it. Since it is going to be a header, I think it would be best if it's height were 25% of the total. We specify these in the first cell of the row, not in the row itself.
This means that we need to make the second row 75% of the height, so we use cell number 5.
Again, you can use percents or actual pixels. Or, you can, like I did, mix them.
We also need to make cell number 5 thinner, and maybe 33% would be good. That leaves 66% for cell 6.
This looks somewhat complicated, but it isn't so bad.
Go on to the next page for some more.
