TABLE BASICS
Tables are a great way to position things like text or images
and make them stay where you put them.
Each Example below is shown as it will look.
The corresponding HTML code is shown to the right.
Just highlight the code you need then copy and paste the code to your page.
Edit the underlined items to reflect your
file names, usernames, text or size requirements ...etc.
Simple easy and checked for mistakes.

Hints for Table Users

<TR> </TR> = A Row

<TD> </TD> = A Column Cell

BORDER="0" for Invisible Tables
BORDER="1" raises outer edge 1 unit
Cellspacing ="2" makes border 2 units wide
Cellpadding ="2" adds 2 units of space around cell contents

Combining the various techniques shown below will allow you
to create your own special table effects

Home




EXAMPLES

CODE EXAMPLES
a table
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD>text </TD>
</TR>
</TABLE>
A table with
wide cellspacing
and small border width
<TABLE BORDER="1" CELLSPACING="8" CELLPADDING="2">
<TR>
<TD>text </TD>
</TR>
</TABLE>
A table with
small cellspacing
and wide border width
<TABLE BORDER="8" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>text </TD>
</TR>
</TABLE>

a table
with centered text
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>text </TD>
</TR>
</TABLE>

Table with 1 row

and 2 columns
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>text </TD>
<TD><P ALIGN=Center>text </TD>
</TR>
</TABLE>

Table with 1 Column

and 2 Rows
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>text </TD>
</TR>
<TR>
<TD><P ALIGN=Center> text </TD>
</TR>
</TABLE>
Table with 2 rows and 2 columns
Table with 2 rows and 2 columns
<TABLE BORDER CELLSPACING="1" CELLPADDING="2">
<TR>
<TD>text </TD>
<TD>text </TD>
</TR>
<TR>
<TD>text </TD>
<TD>text </TD>
</TR>
</TABLE>

a table
with centered text
and image
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>text <BR>
<IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
</TR>
</TABLE>

a centered table
with centered text
and image
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>text <BR>
<IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
</TR>
</TABLE>
</CENTER>

A centered table with
2 cells and 2 rows
with text and images

text here

text here

<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="0">
<TR>
<TD></TD>
<TD><P ALIGN=Center>text text</TD>
</TR>
<TR>
<TD><P ALIGN=Center>
<IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><P ALIGN=Center>
<IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
</TR>
</TABLE>
</CENTER>
A Borderless
"Invisible"
table with 2 cells
and 2 rows
used to arrange
text and 2 images

text here

text here

<CENTER>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">
<TR>
<TD></TD>
<TD><P ALIGN=Center>text text</TD>
</TR>
<TR>
<TD><P ALIGN=Center>
<IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><P ALIGN=Center>
<IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
</TR>
</TABLE>
</CENTER>

Another table with
2 cells and 2 rows
with text and images

text here
text here
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</CENTER>
A Borderless
"Invisible"
table with 2 cells
and 2 rows
used to arrange
text and 2 images
text here
text here
<CENTER>
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</CENTER>
A Borderless
"Invisible"
table with 2 cells
and 2 rows
used to arrange 4 images
<CENTER>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn"SRC="your.gif"></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
</TR>
</TABLE>
</CENTER>

Table with
color background
<TABLE BGCOLOR="#410082" BORDER="1"CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>text </TD>
</TR>
</TABLE>

Table with
cell
background color
<TABLE BORDER="1" CELLSPACING="1"  CELLPADDING="2">
<TR>
<TD BGCOLOR="#410082"><P ALIGN=Center>text </TD>
</TR>
</TABLE>

Table with cell

background colors
<CENTER>
<TABLE BORDER CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD BGCOLOR="#410082" VALIGN="Top"><P ALIGN=Center>text </TD>
</TR>
<TR>
<TD BGCOLOR="#d9d7bb">text </TD>
</TR>
</TABLE>
</CENTER>

Table with
background color

and 
cell background
color
<CENTER>
<TABLE BORDER="1"  CELLSPACING="2"CELLPADDING="2" BGCOLOR="#d9d7bb" >
<TR>
<TD BGCOLOR="#410082">text </TD>
<TD >text </TD>
</TR>
<TR>
<TD>text </TD>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>

table with
color border
<CENTER>
<TABLE BORDER="2" CELLSPACING="2" BORDERCOLOR="#410082" CELLPADDING="2">
<TR>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>

Table With
a

Background
Image
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" ALIGN="Center" BACKGROUND="your_image.jpg">
<TR>
<TD><P ALIGN=Center>text </TD>
</TR>
<TR>
<TD><P ALIGN=Center>text </TD>
</TR>
</TABLE>

Table with cell

Background
Image
<CENTER>
<TABLE BORDER CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD BGCOLOR="#410082" VALIGN="Top"><P ALIGN=Center>text </TD>
</TR>
<TR>
<TD background=tablebg.jpg><P ALIGN=Center>text </TD>
</TR>
</TABLE>
</CENTER>

table with
merged column cells

text

text
<CENTER>
<TABLE BORDER="1" CELLSPACIN="1"  CELLPADDING="2" ALIGN="Center">
<TR>
<TD COLSPAN=2><P ALIGN=Center>text </TD>
</TR>
<TR>
<TD><P ALIGN=Center>text </TD>
<TD><P ALIGN=Center>text </TD>
</TR>
</TABLE>
</CENTER>

table with
merged
row cells

 text
or
Image
text
or
Image
text
or
Image
<CENTER>
<TABLE BORDER CELLPADDING="2" ALIGN="Center">
<TR>
<TD ROWSPAN=3><P ALIGN=Center>text </TD>
<TD>text </TD>
</TR>
<TR>
<TD>text </TD>
</TR>
<TR>
<TD>text </TD>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>
A

table
nested
inside 
a table

text or image
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD>
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD>text </TD>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>
</TD>
</TR>
<TR>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>
A wholelot more

table
nested
inside 
a table
MORE

text or image
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD>
<CENTER>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" ALIGN="Center">
<TR>
<TD>text </TD>
<TD>text </TD>
</TR>
<TR>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>
</TD>
</TR>
<TR>
<TD>text </TD>
</TR>
</TABLE>
</CENTER>
Left
Top
Right
 <TR>
<TD BGCOLOR="#FF0000" ROWSPAN="5">LEFT </TD>
</TR>
<TR>
<TD BGCOLOR="#D6DBE0" COLSPAN="6">TOP<BR><BR>
</TD>
<TD BGCOLOR="#0000FF" ROWSPAN="4">
<CENTER>RIGHT</CENTER>
</TD>
</TR>
<BR><BR>
<TR>
<TD BORDER="0">ONE<BR><BR>
</TD>
<TD BORDER="0" BGCOLOR="#FF0000">TWO
</TD>
<TD BORDER="0">THREE
</TD>
<TD BORDER="0" BGCOLOR="#FF0000">FOUR
</TD>
<TD>FIVE
</TD>
<TD>SIX
</TD> </TR>
<TR>
<TD BGCOLOR="#D6DBE0" COLSPAN="6">THIRD ROW<BR><BR><BR><BR>
</TD>
</TR>
<TR>
<TD BGCOLOR="#000000" COLSPAN="4">FOURTH ROW
<BR><BR><BR><BR>
</TD>
</TR>
One

 Two Three Four Five Six
Third Row
Fourth Row
something
Left
Top
Right
One

 Two Three Four Five Six
Third Row
Fourth Row

Home