Using HTML Tables
to Format Your Web Page
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 web 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:
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 HTML 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 HTML 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 HTML 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 HTML 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 HTML 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 web page, you can create additional HTML tables with color backgrounds
and borders to divide your web page content into sections.
All of your text and additional HTML 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></TD>
</TR>
<TR>
<TD BGCOLOR="#000000" HEIGHT="2"></TD>
</TR>
<TR>
<TD BGCOLOR="#CCCCCC"><P ALIGN=Left>your text
here</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></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 HTML 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 web site!
Copyright © Shelley
Lowery
About the Author:
Shelley Lowery is the author of the acclaimed web design course, Web Design
Mastery.
http://www.webdesignmastery.com
And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book.
http://www.ebookstarter.com
Visit Web-Source.net to sign up for a complimentary subscription to Etips
and receive a copy of the acclaimed ebook, "Killer Internet Marketing
Strategies."
http://www.web-source.net
You have permission to publish this article electronically, in print,
in your ebook or on your web site, free of charge, as long as the author
bylines are included.
html forms Part Two
More Articles
|
|
