So, do you want to add a bit more structure to your page? Use a table...

You had an introduction to more complex HTML when I dealt with image mapping in the last section. More complex HTML is where the code, and thus your web pages, gain a few more dimensions - i.e. you are linking various "bits" of information together under one HTML element, rather than just linking one bit of information in one element the way you do when coding for inlining images and external/internal linking.

For this reason it is that more complex code, such as that used to create image maps, or insert tables, frames and forms can appear daunting. Trust me. It just ain't....but you need to get rid of your suspicions first and have faith in me! All you need to do is learn to "understand" exactly what each bit of code does (i.e. build a model of it all in your mind) then your problems will be over! I will try to guide you through using simple examples upon which you can build even more complex ones as you become more accomplished with "modelling" ideas in your head.

...or you can of course just use an HTML editor to do it, but where would the fun be in that?!

The basic tags you need in order to set up a table are:

<TABLE> is the opening tag to define a table element in a page.
<TR.....> means table row 1.
<TD...> means cell 1, in row 1. You close the cell formatting with </TD>
<TD...> means cell 2, in row 1. Again you close the cell formatting with </TD>
</TR> is the end tag indicating the end of row 1.
<TR...> means the start of row 2.
<TD...> means cell 1, in row 2. You close the cell formatting with </TD>
<TD...> means cell 2, in row 2. You close the cell, as above.
</TR> is the end tag indicating the end of row 2.
however many more of these rows and columns that you need...
</TABLE> must always be here to show the end os the table!

• BORDER="X": Goes in the <TABLE> element. It will give each cell a border around it of a pixel width "=x" you define.
• ALIGN="....": Goes in any of the elements and tells the browser to align the contents of, e.g. a row or a cell (depending on which element you put this attribute in). The variables: "left" (default), "center" or "right" (you can also use "middle" which will do the same as "center") can be entered, whichever you want to align the contents the way you wish!
• VALIGN="top": Exactly the same as above, except it vertically aligns the contents of the row or cell, so the variables are: "top", "bottom" and "middle" ("center" does work, but "middle" is correct).
• WIDTH="x" and HEIGHT="x": You normally set up WIDTH and HEIGHT values in the <TABLE> element (i.e. to give the overall size of the table). Then you would use these, e.g. to give your row height in the <TR element, or cell height in the <TD element. You can do practically anything with these. If you have an image, you use these attributes in the <IMG element instead of the cell or row elements.
• COLSPAN="X": Goes in the <TD> element and is used where you don't want the cell to fit the grid format of the rest of cells in the table, e.g. the code: <TD COLSPAN="2"... will widen this cell so that it takes up the adjacent cell as well - i.e. two neighbouring cells combined into one!
• ROWSPAN="X"...: Exactly the same idea as the above, but referring to rows rather than neighbouring cells. The code: <TD ROWSPAN="2".. will make the cell taller so it takes up the lower cell (as opposed to the one next to it), again combining two cells, a lower one and an upper one, into one cell.
• NOWRAP: This has no variable associated with it and just gets inserted into a cell or a row element to keep text all on one line and prevent it thus from wrapping.
• BGCOLOR="#xxxxxx": Uses the hexdec. colour system (see appendix for colour chart) as we have discussed earlier in this. You can put a colour code in the <TABLE.. element which will give you the overall background colour for the entire table (and will also colour padding and borders that colour too). You can put a colour code in the <TR.. or the <TD.. elements for just the row or cell to be coloured. Again, it is all down to experimentation, and you can really play around with these (as my example table shows you I have!) and make your table look quite 3D! But to get the latter effect, you need to use, and experiment with the two attributes shown below. There are two additional colour attributes: BORDERCOLORDARK="..." and BORDERCOLORLIGHT="..." and you can experiment with these (they go in the TABLE element) to make your table even more "3D" but you have to have a BORDER="x" value greater than zero for these to work.
• CELLPADDING=&Quot;x"..: Goes in the <TABLE.. element and specifies the amounts of space between the edges of the cell and the thing you've put in it!
• CELLSPACING="x"..: Easily confused with the above, it too goes in the <TABLE.. element, but it specifies the amount of space that actually divides the cells. You really need to play with them to get the feel of what they do (using background colours will help you see what they do more easily).

The best thing you can do is experiment with all this, perhaps using the table I have set up below in which I have made use of all the things a table can do, and all its attributes, as comprehensively as possible!

Click the above to enlarge this thumbnail	Couldn't think what to stuff in here!
This is getting to be a pretty nifty table!

The best thing to do with tables is just to get stuck right in there! If I were you, I would set up a basic HTM page in Notepad (or other text editor) and just have a play around having printed off this page first! Though first, you need to formulate a plan (on paper!) as to how you want your table to look, and what you want in the cells. Then you just code this up as per your plan. It will take you a while to get the hang of it, but once you do, there's no lookin' back, man!

As you learn, an additional thing you will pick up along with knowledge is that you will begin to develop a neat WYSIWYG (What You See Is What You Get) editor in your head! What I mean by this is that you will then be able to "visualise" what the result of your coding will be, without having to keep loading your htm source file into a browser continually, in order to see the effect your coding has had! Not only does this save time, but when you develop that ability, you will know for sure that you have become a "proper" HTML propellerhead! Good luck, and have fun!

NEXT: let's have a look at how to use images instead of text as links...