|
Web
Marketing Articles > Laying Out Your Web Pages Using
Tables
Laying Out Your Web Pages Using Tables
The following design was created using tables. See how clean,
tidy and professional it looks. It was easy to do!
Below this example you will find the same design with the
borders of the tables turned on. You
will also find the HTML code. That way
you can see how I did it.
| For your own web page, choose
colours that complement your product or service, add
your personal graphics, write your content or sales
letter in your own friendly style.
Keep the look clean and tidy, though, and make sure
the navigation remains simple and obvious. Get rid of
any animated GIF's and any graphics that are not serving
a very specific purpose. |
| |
|
|
|
| |
|
|
|
| |
ABC
Company
About
Us
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in.
Hendrerit
in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.Lorem
ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. |
|
 |
| |
| Home |
| About
Us |
| Contact
Us |
| FAQ |
| Products |
| Services |
|
| |
home
| about us | contact us | faq | products | services
|
|
|
| |
|
|
|
Below is the same table with the borders turned on.
The small table to the right contains the navigation elements.
It is better to put these kinds of elements in a separate
table rather than in rows within the main table.
Note: The little table has cellpadding set to 5 pixels which
spaces out the navigation elements nicely. It is centered
within the column to provide an open, airy look. Nothing on
your web page should be crowded, if at all possible.
Notice how I've used columns on either side of the main content
cell to add some nice white space (well, grey in this case!).
I've used extra rows above and below the main content cell
for the same reason. I've also broken my text into two paragraphs.
White space rests the reader's eyes. I could have alternatively
used a table with cell padding set to 20 pixels to accomplish
this.
The heading is a serif font (for variety) and the body is
a sans-serif font. If your browser has Verdana as one of its
choices, then you're reading this in Verdana. It's my favourite
font for the Web because it's so easy to read and gives such
a clean, professional look. Most professional web sites use
Verdana.
Notice how the horizontal rule <hr> sets off the title
and adds white space to the page. It's not a graphic, though,
so it adds little in the way of load time. I use horizontal
rules a lot to separate items and add a decorative element.
See TBR
Translations for an example. The dark blue lines at top
and bottom are simply horizontal rules. Neat, eh? Here's
a tutorial on using horizontal rules as dividers and design
elements.
If you look at the code below this example, you will see
in many of the table cells. This is a non-breaking
space and it prevents Netscape from collapsing empty table
cells. My HTML editor (Dreamweaver) adds it automatically.
Remove it, if you need a very narrow cell, and use a transparent
GIF to hold the cell open to the exact width/height you need.
Any cell <td> that contains
something (text, image, table, etc.) should probably have
its vertical alignment set to "top." This ensures
that the content of that cell is placed at the top. The default
is "middle." Of course, "top" may not
always be what you want, but in general it will be.
<td valign="top">Content of cell goes here.</td>
| |
|
|
|
| |
|
|
|
| |
ABC
Company
About
Us
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in.
Hendrerit
in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.Lorem
ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. |
|
|
| |
| Home |
| About
Us |
| Contact
Us |
| FAQ |
| Products |
| Services |
|
| |
home
| about us | contact us | faq | products | services
|
|
|
| |
|
|
|
Here's
what the HTML code looks like for the table without the borders
turned on:
<table width="424" border="0" cellspacing="0"
cellpadding="0" height="532">
<tr>
<td height="2" width="17" bgcolor="#339999"> </td>
<td height="2" bgcolor="#339999"> </td>
<td height="2" width="17" bgcolor="#339999"> </td>
<td height="2" width="114" bgcolor="#339999"> </td>
</tr>
<tr>
<td height="2" width="17" bgcolor="#E9E9E9"> </td>
<td height="2" valign="top" bgcolor="#E9E9E9"> </td>
<td height="2" width="17" valign="top"
bgcolor="#E9E9E9"> </td>
<td height="2" width="114" valign="top"
bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td height="420" width="17" bgcolor="#E9E9E9"> </td>
<td height="420" valign="top" bgcolor="#E9E9E9">
<p align="center"><font face="Georgia,
Times New Roman, Times, serif" size="4"><b>ABC
Company</b></font></p>
<hr size="1" class="green" width="75%">
<p align="left"><font face="Georgia,
Times New Roman, Times, serif" size="2"><b>About
Us </b></font></p>
<font face="Verdana, Arial, Helvetica, sans-serif"
size="2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in.</p>
<p>Hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
</font></td>
<td width="17" valign="top" bgcolor="#E9E9E9"
height="420"> </td>
<td width="114" valign="top" bgcolor="#FFFFCC"
height="420">
<table width="92" border="0" cellspacing="0"
cellpadding="5" align="center">
<tr>
<td valign="top" height="2"><img
src="images/ABC_Company.gif" alt="" width="86"
height="41"></td>
</tr>
<tr>
<td valign="top" height="2"> </td>
</tr>
<tr>
<td valign="top" height="2">
<p><font face="Verdana, Arial, Helvetica, sans-serif"
size="2">Home</font></p>
</td>
</tr>
<tr>
<td height="8"><font face="Verdana,
Arial, Helvetica, sans-serif" size="2">About
Us</font></td>
</tr>
<tr>
<td height="2"><font face="Verdana,
Arial, Helvetica, sans-serif" size="2">Contact
Us</font></td>
</tr>
<tr>
<td height="2"><font face="Verdana,
Arial, Helvetica, sans-serif" size="2">FAQ</font></td>
</tr>
<tr>
<td height="2"><font face="Verdana,
Arial, Helvetica, sans-serif" size="2">Products</font></td>
</tr>
<tr>
<td height="2"><font face="Verdana,
Arial, Helvetica, sans-serif" size="2">Services</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" width="17" bgcolor="#E9E9E9"> </td>
<td height="2" valign="top" bgcolor="#E9E9E9">
<hr size="1" class="green" width="100%">
<font face="Verdana, Arial, Helvetica, sans-serif"
size="1">home
| about us | contact us | faq | products | services<br>
<br></font></td>
<td height="2" valign="top" bgcolor="#E9E9E9"> </td>
<td height="2" width="114" valign="top"
bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td height="2" width="17" bgcolor="#339999"> </td>
<td height="2" valign="top" bgcolor="#339999"> </td>
<td height="2" width="17" valign="top"
bgcolor="#339999"> </td>
<td height="2" width="114" valign="top"
bgcolor="#339999"> </td>
</tr>
</table>
Request
a Free Web Design Consultation Today
Copyright © 2001 - 2009 Able Webs, Burnaby,
B.C. All rights reserved. Contact us at
andrea@ablewebs.com.
Burnaby|Vancouver Web Site Design Company |
