Using Tables To Add Borders

You can use a table as a border around text or an image using this code

<TABLE border=5>
<TBODY>
<TR>
<TD><IMG src="IMAGE URL GOES HERE"></TD>TR></TBODY></TABLE>

Using HTML Inside Tables

You can add the other codes from my guides inside the table

<TABLE border=5>
<TBODY>
<TR>
<TD>
<DIV style="OVERFLOW: auto; HEIGHT: 150px"><FONT color=#333333><IMG src="IMAGE URL GOES HERE" width=350></FONT></DIV></TD></TR></TBODY></TABLE>

The above code will create a table like the one shown below

Changing The Background Colour Of A Table

BGCOLOR This sets the back ground colour for the cell or entire table

Tables Advanced

COLSPAN Joins several cells together horizontally

<table border=2 BGCOLOR=blue>
<tr><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td></tr>
<tr> <td colspan=4> row2 cell1</td></tr></table>

The code <td colspan=4> teels the code how many cells to span across. in this case 4

ROWSPAN Joins several cells together vertically

<TABLE bgColor=blue border=2>
<TBODY>
<TR>
<TD rowSpan=2>row1 cell1</TD>
<TD>cell 2</TD>
<TD>cell3</TD>
<TD>cell4</TD></TR>
<TR>
<TD>cell2</TD>
<TD>cell3</TD>
<TD>cell4</TD></TR></TBODY></TABLE>

Adding Colours To Tables

<TABLE bgColor=orange border=2>
<TBODY>
<TR>
<TD bgColor=black rowSpan=2>cell1</TD>
<TD bgColor=red>cell 2</TD>
<TD bgColor=blue>cell3</TD>
<TD bgColor=green>cell4</TD></TR>
<TR>
<TD>cell2</TD>
<TD>cell3</TD>
<TD>cell4</TD></TR></TBODY></TABLE>

This is done again with the BGCOLOR option, when put in a cell like above it overides the BGCOLOR in the TABLE tag

Extra Tricks

The Bordercolor tag allows you to add a color to your border

For Example

The bordercolordark and bordercolorlight options allow you to add to diffrent colors to the edges of your table, this allows a more 3d effect

<TABLE borderColorDark=yellow borderColorLight=red border=2>
<TBODY>
<TR>
<TD>cell1</TD>
<TD>cell2</TD></TR></TBODY></TABLE>

Making A Basic Table

<TABLE height=374 cellSpacing=0 cellPadding=0 width=367 background="URL OF IMAGE FILE" border=0>
<TBODY>
<TR>
<TD width=100 height=85></TD>
<TD width=200 height=200></TD>
<TD width=96 height=200 rowSpan=2></TD></TR>
<TR>
<TD width=85 height=152>&nbsp;</TD>
<TD width=231 height=152>
<DIV style="SCROLLBAR-FACE-COLOR: #ffffff; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 223px; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #000000; HEIGHT: 126px">
<P align=center>TYPE UR TEXT IN HERE</P></DIV></TD></TR>
<TR>
<TD width=85 height=20></TD>
<TD width=231 height=20></TD>
<TD width=96 height=20></TD></TR></TBODY></TABLE>

1. The parts in ORANGE will determine your background images height and width
2. Replace the part in RED with that of the Url of your image file (often called direct link to image. You will get this from your webhost when you have uploaded your image)
3. Replace the part in GREEN with your text
4. The parts in BLUE are the Hex Colour Codes these the colours of your scrollbar. You can alter these by entering alternate hex codes in

 The code above will create a table like the one shown below

Hex Colour Chart