Tables are quite complex, so you may not wish to attempt using one until you are happy with at least the basic Guide ML tags. However, a simple table is relatively easy to creat. There are 3 tags involved...

• <TABLE> To put at the start of the table, with the closing tag </TABLE> at the end of the table.
• <TR>At the beginning of each row, and </TR> at the end of each row.
• <TD> To start each individul cell, closing with </TD>

Here's an example of a simple table..

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

And here's the code for how it was written..

The code looks quite long, but don't be put off by this. Remember there are only 3 different tags, they just get used repeatedly.

Adding to tags

Once you're happy with the basics, you may wish to try adding to tags to make a more complex table. This way you can add several extras, such as colour and cellpadding. This section is devided out into the three tags, the extras that can be added to them explained under each heading.

Table

Here adding to the <TABLE> tag is explored. Here you can add the following...

• Width
• Cellpadding
• Border colour
• Background colour

By using the width tag, you can chose how big you want your table to be. If you do not use this tag, the table will be the smallest possible size to fit the information it contains. To demonstrate, here is the same simple table, but with the opening tag changed to <TABLE WIDTH="50%">. Please note that the closing tag of </TABLE> does not change...

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

You can see the table is now half the width of the page . We could now chose to add more to the tag, to give a border. For the sake of the example, a border width of 3 is chosen... Now the opening tag is <TABLE WIDTH="50%" BORDER="3">, giving the following result..

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

Now the table looks more like a table , but there's more we can do. How about adding colour to the border? This can be done by adding BORDERCOLOR to the tag¹. In this case, blue is chosen, now giving the opening tag of <TABLE WIDTH="50%" BORDER="3" BORDERCOLOR="blue">

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

Well isn't that colourful? But there're still some white spaces. To fill the table in the colour of your choice, the tag BGCOLOR needs to be used. In the example, the colour sky blue is chosen. Now the opening tag looks like this.. <TABLE WIDTH="50%" BORDER="3" BORDERCOLOR="blue" BGCOLOR="skyblue">

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

Now the table is really colourful . However, you may decide you would like the cells to be a bit more padded. This can be achieved by the use of the CELLPADDING tag. In the example, a cell padding of 5 is chosen, giving an opening tag of <TABLE WIDTH="50%" BORDER="3" BORDERCOLOR="blue" BGCOLOR="skyblue" CELLPADDING="5">

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

See the difference? Now the table is looking much better than the original one, though all that was done were a few additions to the <TABLE> tag.

TR

The same sort of extras for the <TABLE> tag can be used on the opening <TR> tag, giving changes isolated to that table row. In the example, only the firt row will be altered, and the final result of the <TABLE> tag used (that's <TABLE WIDTH="50%" BORDER="3" BORDERCOLOR="blue" BGCOLOR="skyblue" CELLPADDING="5">).

First, the border color can be altered. In the example a border colour of indigo is chosen, changing the opening tag to <TR BORDERCOLOR="indigo">

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

As you can see, the result is exactly the same as on the <TABLE> tag, excep that the result is only on that table row. Thi is similar to when the back ground colour is changed. In the example, the back ground colour chosen is spring green, giving an opening tag of <TR BORDERCOLOR="indigo" BGCOLOR="springgreen">

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

Now the table is looking very colourful.

TD

Changes that can be made to the <TD> tag are the same as those to the <TR> tag. To demonstrate, changes will be made to the central cell (the one that's written <TD>Smiley</TD>), and the newest version of the table used (the one with all the additions to the <TABLE> and <TR> tags). First of all, lets change the BORDERCOLOR. For the example, red is chosen. Now the opening tag reads <TD BORDERCOLOR="red">, giving the result of..

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

Now to change the back ground colour. For the example, royal blue is chosen. Now the tag looks like <TD BORDERCOLOR="red" BGCOLOR="royalblue"/>

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

Now the table is very colourful, and looks quite complex, though all that was done were a few tags added too...

Further Changes

Still not satisfied with your table? There are plenty of other things that can be changed. Once you're happy with the basics, you may wish to try a few of them out. Here are a few examples...

1. Align your table by altering the <TABLE> tag. For example, <TABLE ALIGN="CENTER"> to put the table in the middle of your space.
2. Put tables inside each other for complex effects
3. Use other tags, such as <FONT>, to change cells further.

Here some of the ideas have been put together, and the code is shown to show you how it was done.

Smiley	Name	Shortcut
	Smiley	:-)
	Biggrin	:-D

• Fonts
• Formatting
• Smileys and Pictures
• Linking
• Marquees
• Guestbooks