|
Tables Can Be Your Friends
If you want to place text and/or images next to each other,
you need to learn tables. All the code is placed between:
<TABLE>
<TR>
<TD>text or graphic</TD>
</TR>
</TABLE>
That defines the table, row and cell. You can add ALIGN, BGCOLOR, BORDER tags
to define it further. CELLSPACING defines how much room you wnat between cells.
CELLPADDING defines how much room you want around the text or graphic within the
cell. You can keep adding rows and cells as you need them and make certain cells
span extra rows or columns. Here are some examples.
Example One: A table with 2 rows and 3 columns, CELLSPACING
of 5, no CELLPADDING:
<TABLE BORDER="3" CELLSPACING="8" CELLPADDING="0">
<TR>
<TD>text</TD>
<TD>text</TD>
<TD>text</TD>
</TR>
<TR>
<TD>text</TD>
<TD>text</TD>
<TD>text</TD>
</TR>
</TABLE>
and it looks like this:
| text |
text |
text |
| text |
text |
text |
Here is the same table but with no CELLSPACING
and a CELLPADDING of 8:
| text |
text |
text |
| text |
text |
text |
Here is the above table with a white background and the
first cell in light blue:
<TABLE BGCOLOR="#FFFFFF" BORDER="3" CELLSPACING="0"
CELLPADDING="8">
<TR>
<TD BGCOLOR="#BFBFFF">text</TD>
<TD>text</TD>
<TD>text</TD>
</TR>
<TR>
<TD>text</TD>
<TD>text</TD>
<TD>text</TD>
</TR>
</TABLE>
| text |
text |
text |
| text |
text |
text |
| text spans 2 columns |
text |
text
text
text |
top &
right |
spans two
rows &
aligned
bottom |
| text |
text |
| text centered |
Ok, here is a difficult one. I put all kinds of commands
in this one so you can study it. The code is:
<CENTER>
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5"
BGCOLOR="#FFFFFF">
<TR ALIGN="CENTER">
<TD COLSPAN="2"> text spans 2 columns</TD>
<TD>text</TD>
</TR>
<TR ALIGN="CENTER">
<TD>text<BR>
text<BR>
text</TD>
<TD ALIGN="RIGHT" VALIGN="TOP">top &<BR>
right</TD>
<TD ROWSPAN="2" VALIGN="BOTTOM">spans two<BR>
rows &<BR>
aligned<BR>
bottom</TD>
</TR>
<TR>
<TD>text</TD>
<TD>text</TD>
</TR>
<TR ALIGN="CENTER">
<TD COLSPAN="3" BGCOLOR="Green"><FONT COLOR="White"><B>text
centered</B></FONT></TD>
</TR>
</TABLE>
</CENTER>
Well, hope I haven't confused you too much. Just play around
with the codes and have fun with it!
Oh, one other hint...if you see a layout you like on a page,
take a look at the source code (hit View...Page Source). You can learn a lot that
way.
|
