Tables, Part Two
Now we have our two rows, two column table set up, let's see if we can tackle a little bit more complicated idea.
I envision our webpage like this: we have the main body of the text in the first cell of the first row. Then we have the list of links (that are at the bottom of our page right now), in the second cell of the first row. Finally, we put the copyright information in the second row. But that's only one sentence and we have two cells. So, what if we center it across BOTH cells? How can we do that?
It's not as difficult as it sounds, but it can be a little complicated when you start working on larger tables. So...good thing we have a simple little table to start, right?
The first thing we need to do is look at our table and our code from Part One...so I'll bring it over. Here's our table:
And here's the code we used to create it:
What we need to do is join the two cells on the bottom row, so it looks like there's only one cell there. In HMTL, you can join together cells in the same row this way by using the
colspan= attribute. This simply means you want one cell to span the width of two adjoining columns. So, we add this attribute to the first tag on the second row. Like this:
Now here's where it can get confusing and tricky in a large table: now that your first cell is taking the place of TWO cells, you need to delete the second set of on the second row. Sounds simple...and it is. It's just in a large table you can get lost on which cells you delete and which you don't. So, now your code will look like this:
which gives us:
Main text
|
Links list
|
Copyright text
|
If we had wanted to join together two columns, it gets a little more complicated. You use the
rowspan= attribute for that. If we want the first column joined, we add it to the first set of tags on the first row. Like this:
Notice there's only one set of tags on the second row. That's because the first one has been joined to the cell directly above it, making that cell span two rows, which gives us:
If, instead of the first two, you wanted to second two cells combined, you would have put the rowspan attribute in the second cell of the first row, like this:
Again, there's only one set of tags on the second row. And, again, it's because the second cell has been joined to the cell directly above it, making that cell span two rows. Like this:
which gives us:
Thoroughly confused yet?