|
|
|
Sunday, May 11, 2008
One of the most popular tools for Web Design is tables they allow you to have a great deal of control over your Web page layout.
To construct a table, you must use these tags:
<TABLE></TABLE> Defines the perimeter.
<TR></TR> Creates each row.
<TD></TD> Creates each cell or cells.
The TD tag always goes inside the TR tag, like this:
<TR><TD> Content </TD></TR>
The TR and TD tags always go inside the TABLE tag, like this:
<TABLE><TR><TD> Content </TD></TR></TABLE>
That is your basic table foundation. You can build from there and create all your tables.
P.S. You can use programs like HomeSite by Allaire to build Webpages, it is not a FrontPage type of builder. You must know the HTML code, but it helps make things move with shorcuts and tag insertions.
I brought this up becasue Homesite has one of the BEST tables wizards I've ever seen. You can create very complicated tables without really knowing anything about tables. This will also help you understand tables better.
Real-Time Examples
OK, let's get into some real examples of tables. Below is a basic two-row, four-cell table.
Code for above table
<TABLE ALIGN="center" CELLSPACING="2" CELLPADDING="2" BORDER="1">
<TR>
<TD WIDTH="150"> Cell1 </TD>
<TD WIDTH="150"> Cell2 </TD>
</TR>
<TR>
<TD WIDTH="150"> Cell3 </TD>
<TD WIDTH="150"> Cell4 </TD>
</TR>
</TABLE>
|
Advanced Table layout
Below is an example of a more difficult table to create using the COLSPAN and ROWSPAN tags. Under the table is the code used to make it.
First Row COLSPAN=4 |
Cell 1
ROWSPAN=2
COLSPAN=2 |
Cell 2 |
Cell 3 |
| Cell 4 Row 2 |
Cell 5 Row 2 |
| Cell 6 Row 3 |
Cell 7 Row 3 |
Cell 8 Row 3 |
Cell 9 Row 3 |
| Last Row COLSPAN=4 |
Code for above table
<TABLE CELLSPACING="5" CELLPADDING="5">
<TR>
<TD COLSPAN="4" WIDTH="100%" HEIGHT="25"><B><CENTER>
Advanced Table layout COLSPAN=4</CENTER></B></TD>
</TR>
<TR>
<TD ROWSPAN="2" COLSPAN="2" BGCOLOR="#FF0000" WIDTH="150" HEIGHT="75"><FONT FACE="Arial, Helvetica" COLOR="#FFFFFF"><B>
Cell 1 ROWSPAN=2 COLSPAN=2</B></FONT></TD>
<TD BGCOLOR="#FF0000" WIDTH="150" HEIGHT="25"><FONT FACE="Arial, Helvetica" COLOR="#FFFFFF"><B>
Cell 2</B></FONT></TD>
<TD BGCOLOR="#FF0000" WIDTH="150" HEIGHT="25"><FONT FACE="Arial, Helvetica" COLOR="#FFFFFF"><B>
Cell 3</B></FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000" WIDTH="150" HEIGHT="25"><FONT FACE="Arial, Helvetica" COLOR="#000000"><B>
Cell 4 Row 2</B></FONT></TD>
<TD BGCOLOR="#FF0000" WIDTH="150" HEIGHT="25">
Cell 5 Row 2</TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF" WIDTH="150" HEIGHT="25">
Cell 6 Row 3</TD>
<TD BGCOLOR="#FFFFFF" WIDTH="150" HEIGHT="25">
Cell 7 Row 3</TD>
<TD BGCOLOR="#FFFFFF" WIDTH="150" HEIGHT="25">
Cell 8 Row 3</TD>
<TD BGCOLOR="#FFFFFF" WIDTH="150" HEIGHT="25">
Cell 9 Row 3</TD>
</TR>
<TR>
<TD COLSPAN="4" BGCOLOR="#ff0000" WIDTH="100%" HEIGHT="25">
Last Cell COLSPAN=4</TD>
</TR>
</TABLE> |
Those are just a couple examples of how you can use tables to organize your content. Tables can also be placed inside of each other for even more control.
|
|
Tell a friend ...
Contact Us
About GifArt
Support
Links
Tour
Affiliate Program
