Hmmm. This Table is a lot more decorative than the last one....
TABLES
(I hope you noticed there's been a subtle change in the background of this page : that's because I would like the default border to show up this time!)
You have already learned how to put a simple Table onto your page : now we can start to vary the basic layout.
Those cells, all so nice and symmetrical, don't HAVE to be all the same size : we can do this if you like :
| How about a header here? | ||
| A picture here would look good | ....and some text | |
| ....still more | ||
| *** | In fact, anything you want to put in the cells!! | |
You can do this simply by putting in the number of rows or columns you want the data cell to span by typing in the rowspan or the colspan attribute in the <TD> tag : minus the text, the Table above is typed in like this :
<TABLE WIDTH="450" BORDER="5" cellpadding="5" cellspacing="3">
<TR><TD colspan="3">text</TD></TR>
<TR><TD rowspan="2" colspan="2">text</TD><TD width="150">text</TD></TR>
<TR><TD>text</TD></TR>
<TR><TD width="150">text</TD><TD colspan="2">text</TD></TR>
</TABLE>
And if you want to put in a background colour or "wallpaper" just add them to the Table tag as either a hexadecimal colour reference or GIF / JPG file name. To add pictures to your table, simply put the file name in between the appropriate pair of TD tags - be aware that the cell size may adapt to the picture size so this could require some trial-and-error until you get the hang of it! The best way to accomodate pictures is to either standardise the size of the pictures or to use the "colspan" and "rowspan" attributes to adjust the size of the cell(s) with the picture(s) in.
You can also create a link from your text or pictures in the normal way, by using the <A HREF=""> </A> tags around the links but inside the <TD> </TD> tags (see Table at the botom of this page.)
ALIGNING THE DATA
You will probably want to align the data - be it pictures or text - within the cells. This is done by adding the attributes align (align horizontally) and valign (align vertically) to the TD tag.
Data in a cell can be horizontally aligned to left, right or center (note the American spelling - it won't work if you spell it centre, as I discovered after going quietly crazy for some time whilst trying to discover WHY it wouldn't work!!)
To align vertically, specify top, bottom or middle depending on what effect you want: to put the data in the very centre of the cell, your opening TD tag should read
<TD align="center" valign="middle"> with any extra colspan, rowspan and width attributes specified.
Two points I may have omitted so far : 1) HTML is not case-sensitive - it doesn't matter whether you type in lower-case or capital letters. I tend to use capitals for the tags and lower-case for the attributes, but that is purely my choice so I can check through it easily.
2) Within each individual opening tag, it doesn't matter what order you put the attributes in. I would suggest that you develop an order which seems logical to you and then stick to it, that way you won't miss anything out. The order of the tags DOES matter though - TABLE, ROW, DATA, CLOSE DATA, DATA, CLOSE DATA, CLOSE ROW; ROW, DATA, CLOSE DATA, DATA, CLOSE DATA, CLOSE ROW etc., and finally CLOSE TABLE.
If you see a table layout you particularly like on someone's page, have a look at the source and see how they did it : on your browser bar you will see "view" - click on it and a drop-down menu will appear; scroll down to "source" and click there and a window will open with all the HTML visible. Alternatively - and you will have to do this if the page is built in Frames - right-click on the background and then click "view source" on the pop-up menu. Try it on this page; scroll down to near the bottom for the HTML coding for this table :
| Try these links | ||
| Basic Tables page | HTML help index | index and home page |
| CLICK HERE for a way of using your Tables knowledge to organise your whole page. |  | |
Email me if you want to know more or need help
Header clipart image free with Microsoft Office