Business / Internet Marketing and Tools
/ Advertising / Ebooks / Success /Web
Site / Opt-In Lists / FAQ's
Web Site Design***
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 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
Tables can be used in
an unlimited number of ways including:
your text and images
• Display your text in a newspaper
• 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
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
Tables are created with
the <TABLE></TABLE> tags.
The <TABLE> tag begins the table
code and the </TABLE> tag ends the
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>
Basic Table Structure:
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
<TABLE BORDER CELLSPACING="10"
<TD WIDTH="20%"> </TD>
<TD WIDTH="80%"> </TD>
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
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
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.
<TD BGCOLOR="#000000" HEIGHT="2"></TD>
ALIGN=Left>your text here</TD>
<TD BGCOLOR="#000000" HEIGHT="2"></TD>
Keep in mind, when displaying text within
each table cell, to specify a specific
font, you must use a font tag within each
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
If you're in need of a
professional logo, Gotlogos will design
a beautiful logo for your site for only
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
Copyright © Shelley