Using Tables to Format Your Web Page
By Shelley Lowery
Designing a professional looking web site involves much more
than simply displaying text between your body tags. In order
to organize your page, you must use tables.
A table is an HTML element, also referred to as a "tag," and
is used to display your web page content in an organized
fashion.
Your page can be set up in columns and rows, you can display
your table cells with or without a border, and you can even
have a color or image patterned background.
Tables can be used in an unlimited number of ways including:
- Organize your text and images
- Display your text in a newspaper format
- Add color and image backgrounds to text areas
- Display charts
If you've never designed a web page, your first step will be
to learn some basic HTML. You can find a beginner tutorial
at NCSA Beginner's Guide to HTML:
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
When you begin designing your web page, you may want to
consider placing all of your page content within a table.
This will enable you to adjust your table's cellspacing to
keep your text from displaying too close to the left border
of your page. The higher the cellspacing value, the further
away from the left border your text will be displayed. In
addition, tables will enable you to display your page
content in rows and columns rather than one big block of
text.
Tables are created with the <TABLE></TABLE> tags. The
<TABLE> tag begins the table code and the </TABLE> tag
ends the table.
In addition to the table tags, you must also specify the
number of rows and columns your table will contain. To do
this, you must use the <TR> tag, which specifies the
beginning of a table row and the <TD> tag, which will
display your table data. The <TD> tag should be placed in
front of any information you would like to be displayed
within a cell. The </TD> tag will close the cell. All of
these tags will be placed between the <TABLE> and
</TABLE> tags.
Basic Table Structure:
<TABLE BORDER>
<TR>
<TD>Content</TD>
</TR>
</TABLE>
If you're just starting out, you may want to use a simple
table format that will display your navigational links on
the left or right hand side of the page, and your text and
other information on the rest of the page -- in two columns.
When working with tables, make sure you create your tables
with a border. This will enable you to see exactly where
your borders are so that you can make sure everything is
displaying properly. Once your page is complete, you can
remove the border.
The following table code will create the basic layout for a
web page with two columns. The first column will span 20% of
the viewers' screen. The second will span 80% -- for a total
of 100%.
<TABLE BORDER CELLSPACING="10" CELLPADDING="10" WIDTH="100%">
<TR VALIGN="Top">
<TD WIDTH="20%"> </TD>
<TD WIDTH="80%"> </TD>
</TR>
</TABLE>
Notice the table width is set to 100%? This width will
display the table across 100% of the viewers' screen. The
cellspacing and cellpadding are set to 10 so that the text
won't display right up against the left edge of the page,
and there will be some space between the cells.
Once you have the basic page layout finished, you can begin
adding your content. Your first step will be to delete the
placeholder . These placeholders were placed between
the <TD> and </TD> tags to enable the borders to display -
- empty table cells do not display within a web browser.
Your logo and navigational links should be displayed within
the left column, which is the smaller of the two columns.
All of your page content will be placed within the other
column.
Keep in mind, the top left corner of your web page will not
only be used to display your logo, but should also contain
your most important keyword phrase. Make sure you include an
image alt tag displaying your keyword phrase within your
image code.
To spice up your page, you can create additional tables with
color backgrounds and borders to divide your content into
sections.
All of your text and additional tables will be placed between
<TD WIDTH="80%"> </TD>. Simply replace the
text with your content and table codes.
For example, the following table can be used to display an
introduction to your product, article, review or whatever
you'd like.
Keep in mind, you don't want to place all of your
information on your main page. The key is to include
highlights of your site on your main page with a link to
further information.
The example link at the bottom of the table can be used to
direct your visitors to further information. You can use the
colors of your choice and adjust the width to suit your
needs.
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=80%>
<TR>
<TD BGCOLOR="#919C9C">
<P ALIGN=Center>
<FONT face="Verdana,Helvetica" SIZE="2" COLOR="#FFFFFF">
<B>Your Table Heading</B>
</FONT>
</P>
</TD>
</TR>
<TR>
<TD BGCOLOR="#000000" HEIGHT="2"></TD>
</TR>
<TR>
<TD BGCOLOR="#CCCCCC">
<P ALIGN=Left>your text here</P>
</TD>
</TR>
<TR>
<TD BGCOLOR="#000000" HEIGHT="2">
</TD>
</TR>
<TR>
<TD BGCOLOR="#919C9C">
<P ALIGN=Center>
<FONT face="Verdana,Helvetica" SIZE="2" COLOR="#FFFFFF">
<B>Link to further info</B>
</FONT>
</P>
</TD>
</TR>
</TABLE>
Keep in mind, when displaying text within each table cell, to specify a specific font, you must use a font tag within
each table cell.
Once you complete your web page, make sure you remove your
table border. That's all there is to it.
If you're not confident in your ability to design a professional looking web site, Template Monster offers a
large variety of highly professional site templates.
http://www.templatemonster.com
If you're in need of a professional logo, Gotlogos will design a beautiful logo for your site for only $25.
http://www.gotlogos.com
Take your time and test different table designs. Try adding new rows and columns and change the background and border
colors. The more you practice, the better you will become.
Gook luck with your new site!
Copyright © Shelley Lowery 2003. All Rights Reserved
About the Author:
Shelley Lowery is the author of Web Design Mastery - An in-depth guide to professional web design. And, Ebook Starter - A complete ebook design kit. Subscribe to Etips and receive a free copy of the highly acclaimed ebook, "Killer Internet Marketing Strategies."
mailto:etips-subscribe@ebookstarter.com?subject=subscribe
http://www.web-source.net/cgi-bin/t.cgi?l=bl1
