| Service
request form |
Free Search engine submitter
Directory submission
|
|
| |
|
| |
| Free
Hosting Reseller |
| |
| Dedicated
Hosting |
| |
Website
Hosting
Uptime Guarantee - 99.9% |
| » |
Economy
Hosting
50
MB Space, 1 GB Bandwidth
1 Domain Hosted, Unlimited parked domains, 5 FTP accounts, 500 email accounts, 30 SubDomains, PHP4 & PHP5
$3/month
Domain Registration: $6 |
| » |
Business
Hosting
15
GB Space, 300 GB Bandwidth
3 Domain Hosted, Unlimited parked domains, 20 FTP accounts, 100 email accounts, 30 SubDomains, PHP4 & PHP5, 20 MySQL DBs
$4/month
Domain Registration: $6 |
| » |
Corporate
Hosting
25
GB Space, 400 GB Bandwidth
30 Domain Hosted, Unlimited parked domains, 50 FTP accounts, Unlimited email accounts, 30 SubDomains, PHP4 & PHP5, 50 MySQL DBs
$8/month
Domain Registration: $6 |
| » |
Enterprise
Hosting
40 GB Space, 500 GB Bandwidth
Unlimited: Domain hosting & parking, FTP accounts, email accounts, SubDomains, MySQL DBs. With PHP4 & PHP5 support
$10/month
Domain Registration: $6 |
| » |
Compare
the two plans |
| » |
Web
Hosting Glossary |
 |
|
| |
|
| |
| |
|
| |
|
|
| Using Tables to Format
Your Web Page |
Using
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 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 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></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 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
More Articles
|
|
Web Services
|
