Now we've removed the usual to show you more adequately how to create a table. While this is tutorial for more people who already know HTML (Lean HTML Here) it is definetly something you need to learn. In fact this entire site is designed with tables.
Lets start with learning the basics.
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
These are simple enough. <TABLE> starts the table, <TR> starts the rows, <TD> starts the colums and never forget to end </TD> </TR> </TABLE>.
Example:
<TABLE>
<TR>
<TD>
Cell One
</TD>
<TD>
Cell Two
</TD>
</TR>
<TR>
<TD>
Cell Three
</TD>
<TD>
Cell Four
</TR>
</TD>
</TABLE>
Returns:
| Cell One
|
Cell Two
|
| Cell Three
|
Cell Four
|
Now lets actualy see the table
Change:
<TABLE>
to
<TABLE border=5>
| Cell One
|
Cell Two
|
| Cell Three
|
Cell Four
|
We can ajust the width of the whole table by adding the width=# command
Example:
<TABLE width=300>
<TR>
<TD>
This is my realy cool pic
</TD>
<TD>
<img src=moon.gif>
</TD>
<TD>
It's a moon image that I made my self
</TD>
</TR>
</TABLE>
Returns:
|
This is my realy cool pic
|
|
It's a moon image that I made my self
|
We can also ajust the width to a percent
Change:
<TABLE width=300>
to:
<TABLE width=50%>
|
This is my realy cool pic
|
|
It's a moon image that I made my self
|
The width=# command works with <TD>.
Example
<TABLE width=300>
<CAPTION>
Tables are dynamic!
</CAPTION>
<TR>
<TD width=33%>
This just in: you can ajust the size of your
</TD>
<TD width=33%>
tables. You can denote their size with the width=#
</TD>
<TD width=33%>
and height=# commands.
</TD>
</TR>
</TABLE>
Returns:
Tables are dynamic!
| This just in: you can ajust the size of your
|
tables. You can denote their size with the width=#
|
and height=# commands.
|
Three Notes:
1. 33%+33%+33%=99% the other 1% is divided among the cells.
2. <CAPTION> creates a centered text above the table.
3. Yes, you can use the height=# command, but it is rarely used
We can align the text and images inside both side to side with align="" and up and down with valign="".
Example:
Change all:
<TD width=33%>
to:
<TD width=33% align="center" valign="top">
Returns:
Tables are dynamic!
| This just in: you can ajust the size of your
|
tables. You can denote their size with the width=#
|
and height=# commands.
|
Much better. Each cell can have it's own alignment properties. align="" can be set to left center or right; valign="" can be set to top (most used) bottom or middle. You can also ajust the alignment of the table itself just like and image.
Now onto more advanced Tables.
We use cellspacing=# in the <TABLE> command to add distince between cells.
Example (useing border=3 so that you can see the changes):
<TABLE border=3 cellspacing=30>
<TR>
<TD>
Cell One
</TD>
<TD>
Cell Two
</TD>
</TR>
</TABLE>
Returns
Note: cellspacing=3 works without border=# also.
cellpadding=3 also goes into the <TABLE> command and acts as a buffer between the cell edges and the text and images inside.
Example:
Change:
<TABLE border=3 cellspacing=30>
to:
<TABLE border=3 cellspacing=30 cellpadding=30>
Returns:
colspan=# merges multiple cells in the same row together and goes into the <TD> command.
Example:
<TABLE border=3>
<TR>
<TD colspan=2>
Red and Green
</TD>
</TR>
<TR>
<TD>
Red
</TD>
<TD>
Green
</TD>
</TR>
</TABLE>
Returns:
Note: without the colspan=2 the above would look like:
rowspan=# also goes in the <TD> command but is the opposite of colspan=#.
Example:
<TABLE border=3>
<TR>
<TD>
Short
</TD>
<TD rowspan=3>
T
<BR>A
<BR>L
<BR>L
<BR>!
</TD>
</TR>
<TR>
<TD>
Short
</TD>
</TR>
<TR>
<TD>
Short
</TD>
</TR>
</TABLE>
Returns:
| Short
|
T
A
L
L
!
|
| Short
|
| Short
|
Without rowspan=3:
| Short
|
T
A
L
L
!
|
| Short
|
| Short
|
With rowspan=3 and without border=3:
| Short
|
T
A
L
L
!
|
| Short
|
| Short
|
You can also put Tables inside Tables the same way you would text or images.
Example:
|
|
| Short
|
T
A
L
L
!
|
| Short
|
| Short
|
|
Finaly the background you can change the background color with bgcolor="" or ad your own image with background="" in either the <TABLE> or <TD> command.
Example:
<TABLE align=center height=300 width=75% cellspacing=0 border=0 cellpadding=10>
<TR>
<TD align=center valign=middle width=50% bgcolor="red">
This is bgcolor="red"
</TD>
<TD align=center valign=middle width=50% background="moon.gif">
<font color=red>This is background="moon.gif"</font>
</TD>
</TR>
</TABLE>
Returns:
| This is bgcolor="red"
|
This is background="moon.gif"
|
I've also set up several Table Examples.
| 
