Having a good layout is very important on a web page and just being able to centre things is quite restrictive. Luckily tables provide a way to precisely position things on our page. The actual HTML is not very hard, but you have to carefully plan your layout, or it could all go pear shaped. Another use for tables is to display statistics in a table, a bit like a spreadsheet. I'll show you how to do that first because it's easier to explain.
The first thing you have to do when you want to start a table is to declare it, like this:
WIDTH=100% makes the table fill the whole width of the screen, if you want it to fill less you put a lower
percentage in.
BORDER=1 gives the table a thin border. A higher number would make it thicker where as BORDER=0
would make it invisible, leaving it out also makes them invisible.
CELLPADDING=2 makes the writing in the table appear 2 pixels away from the edge of its cell, you
can play about with this or leave it out.
Tables are made from cells, these are the individual boxes. These occur on different rows. To start a new cell you use the <TD> tag, and to go on to the next row you use the <TR> tag. Now that you're learning about tables you should be able to tell that the example boxes are actually a table with a width of 80%, a border of one and just one cell. Here is an example of a table that shows some interesting statistics about my sock drawer. I've made up all the figures by the way. I'm not that interested in socks.
|
<HTML> <HEAD> <TITLE>Tables.</TITLE> </HEAD> <BODY>
<TABLE WIDTH=100% BORDER=1 CELLPADDING=2>
</BODY> |
It's important to end your table, not doing so can sometimes really mess up your page. The hard thing about tables is actually knowing where everything is going to appear. You work across each row from left to right and then do the same on the next row down. Laying your html file out neatly is important so you can keep track of everything.
We have a lot of control over tables and are able to change the width of each column and also align text to centre it or make it justify to the right. We'll use the example before but make some changes; I've shortened it to only two rows so our example doesn't get too long. Here is a list of what we are going to do.
|
<HTML> <HEAD> <TITLE>Tables.</TITLE> </HEAD> <BODY>
<TABLE WIDTH=100% BORDER=1 CELLPADDING=2>
<TR><TD> Red
</BODY> |
If you like you can give each column a width but these all have to add up to the full column width that you set in the table declaration. All the alterations we have made to this table are done by extending the <TD> tag that starts a new cell. Changing the width of the column is done by adding the parameter WIDTH= followed by the percentage that you would like it to fill. You can see this done in the example above. You can also change the alignment of the text by adding the parameter ALIGN=" ", between the " " you can choose between left, middle and right. If you leave this parameter out left is standard.
The easiest way to give your page a nice layout is to add columns, to give it a magazine or newspaper feel. You need to make the table borders invisible and create a table with three columns. Here is the example:
|
<HTML> <HEAD> <TITLE>Tables.</TITLE> </HEAD> <BODY>
<TABLE WIDTH=100% BORDER=0 CELLPADDING=2>
</BODY> |
As you should see from this example it gives us the desired effect. A problem occurs when one column has less writing in than the others do. For a start in the example above the column with less writing in it would become thinner. This can be solved by giving each column a width using the WIDTH= parameter. Then what happens is the writing in that column is in the middle of that column rather than starting at the top. This is easy to sort out and we use a similar parameter to ALIGN, it is VALIGN which stands for vertical align. So if you want the writing to start at the top of the cell you add VALIGN="top", you can also have middle or bottom.
Sometimes you need to add a title that spans across all the columns under it. This is like the headline of a newspaper. This is in fact very easy to do. All you need to do is add the parameter COLSPAN= into the cell that you want to take up the room of more than one cell. The number you add after the = is how many columns you want it to take up. We'll use our three column example from before and add an extra cell to the top with a big title.
|
<HTML> <HEAD> <TITLE>Tables.</TITLE> </HEAD> <BODY>
<TABLE WIDTH=100% BORDER=0 CELLPADDING=2>
</BODY> |
Of course another way to achieve this affect would have been to start the table after you had written the large title, but there are times when you do need COLSPAN. As well as colspan there is also rowspan. This is less used than colspan but there are times when it is useful. Here is an example of it in action.
|
<HTML> <HEAD> <TITLE>Tables.</TITLE> </HEAD> <BODY>
<TABLE WIDTH=100% BORDER=1 CELLPADDING=2>
</BODY> |
That is about everything on tables. They can be quite tricky but with careful planning they should not be too much trouble and they give some great benefits. In the next chapter we are going to learn about forms.