HTML: A Guide to Hard-Coding

 

Advanced Tables

Like I mentioned before, the most common use for tables is to control the layout of your page. With tables, you can place object precisely where you want them.

One of the most common layouts of web pages is to have a header across the top of the page, a navigation column on the left and then a big area for the major content of the page. How is this done? How can you make one table data <td> go all the way across the page? How can one <td> go all the way down a page vertically?

This is done with "rowspan" and "colspan."

Even though I said earlier that tables don't actually have columns, we do have a tag that spans columns. It doesn't quite make sense, but it works. To start with, let's look at a simple table that has many rows and columns .

This table has basically three rows and four columns.

The code for it is quite easy, as you can see by the code below.

Let's start manipulating the code to get the header across the top, the column down the left side, and the large area in the middle, which looks basically like this, but without the lines:

The first thing we need to do is to take the first cell of the first row and make it go all the way across the page.

Since there are four "columns", we are going to need to make the first cell span four columns.

Here's the code:

Which looks like this:

There are some important things you need to notice about the code.

First, I had to take out 3 cells of the first row in order to accommodate the 4 column span. Therefore, numbers 2, 3 and 4 have disappeared.

Additionally, colspan does not affect the other rows; the number of cells in those rows has remained the same.

Go on to the next page for some more.