Simple
Web Page Layout Using Tables
Although
there are more technologically advanced methods of putting a web
page together, nothing beats the simplicity and ease of tables.
Besides being easy to use they're more search engine friendly than
methods using databases, such as asp, php, or mysql.
Anyone
who's used tables in a Word document or a spreadsheet is familiar
with using rows and columns to create cells. However, in website
design tables are used a little differently. The main purpose of
a table in a document or spreadsheet is to organize information.
In a web page the purpose of a table is to position text and
images.
For
example, this web page consists of two main tables - one for the
header and one for the main content. The top table used for the
header is one row with three columns. The table with the main content
is three rows and five columns, with additional tables inserted
in three of the table cells.
Each
of the navigation links in the left column are actually one cell
tables (one row, one column). The mauve horizontal and vertical
lines separating the main content from the header, footer, and sidebars
are rows and columns. Tables
are extremely versatile, as you can see.
When
you use a website design program to insert a table on a web page
you'll be offered some options. Each program works a little differently
so you may need to poke around to find where these options are within
the program you're using.
- Number
of rows and columns.
This creates the cells of the table
- Width
of the table.
The options are percentage of the total web page or number of
pixels. Selecting the percentage option will allow the table to
expand or contract according to the size of the viewer's monitor.
Inserting an exact number of pixels will cause the table to be
displayed exactly the same width no matter what size monitor the
viewer has. At this time, the majority of internet users have
monitors with a width of 800 pixels or more. Taking into consideration
the pixels needed for a scroll bar and margin, it's prudent to
specify a width of no more than 720 pixels.
- Height
of the table. Height is typically not specified because as
the information is inserted into the table cells the height is
automatically adjusted.
- Cell
spacing.
This specifies the distance between cells of the table. The red
and pink one cell table below has cell spacing of 1 pixel.
- Cell
padding.
This specifies the "cushion" within each cell, so that
text or images aren't crammed up against the cell borders. Example:
the navigation tables on the left sidebar of this web page are
set to 5 pixels of cell padding.
- Cell
border. ALWAYS set this to 0. Otherwise you end up with a
dorky frame around your table... a dead give-a-way that an amatuer
designed the website.
- Background
color.
This specifies the background color for the entire table. Additional
creative options are to use cell spacing and different background
colors for the cells. Examples are the navigation tables on this
page. The background color of the entire table is mauve and the
background color of the cell is light peach.
- Table
alignment. Options
are default, which is to the left on the web page, left,
center,
and right. Why have an option for left alignment if the default
is left? Because align left and align right are used when you
want text to wrap around the table... like this little red and
pink one-cell table.
In
addition to the formatting options for the table, there is additional
creative formatting that can be done with each of the cells.
- Cell
width.
Each cell can be specified as a percentage of the table or as
an absolute number of pixels. However, if you have more than one
row, the cells in each column need to be the same width. Otherwise
the browser will have a nervous breakdown and may not display
your table at all. Specifying the width of the cells in the first
row of the table sets the width for all subsequent cells. The
tables on this page use both percentage and absolute numbers.
The column with the navigation is 200 pixels and the columns that
appear to be vertical lines are 2 pixels. The center column has
no width specified so that it can expand and contract according
to the width of the viewer's monitor.
- Cell
height. As you insert information into the cells the height
of the entire row is automatically adjusted so it all fits. However,
there are some times when you'll want to specifiy the cell height.
The top and bottom mauve lines on this web page, for example,
are actually table cells with a specified height of 2 pixels.
When specifying a cell height or width of less than 15 pixels
make sure there is not a non-breaking space in the cells. The
non-breaking space is used as a space holder and determines the
minimum width and height of the table cell, which may be much
more than you want. Look in the HTML for and delete
it in every cell you want to use as a vertical or horizontal line.
- Cell
background color. When inserting text in the cells it's advisable
to use light colors for ease of reading the text.
- Cell
background image.
Like italics and blinking things, background images are not a
part of good website design. It's never a good idea to use any
background image or pattern behind text. It tends to make it more
difficult to read the text. Additionally, recent versions of Internet
Explorer don't display background images in tables.
- Horizontal
alignment. The
default horizontal alignment for each table cell is left. Additional
options are center and right.
- Vertical
alignment. The default vertical alignment is center. Thus,
if you have one cell in a row with lots of text but not much text
in the other cells in the same row, the text in the other rows
will end up in the center of the cell with lots of space around
it. It's advisable to specify top vertical alignment for the cells
with text content, such as the center cell of this table on this
web page. The vertical alignment can also be used for creative
image placement.
Troubleshooting
Your Tables
If
something isn't working in your tables the best way to find it and
fix it is to look in the HTML. The HTML for a table is pretty simple.
If you're using tables with many rows or many tables within tables
just go slowly and you'll soon be able to locate the trouble. Remember
that HTML reads from left to right, top to bottom, just do when
you read a book.
The
basic HTML for a table is this:
<table>
</table>
<tr> </tr> This defines the table row
<td> </td> This defines the table column
The
HTML for the two row, two column table below looks like this:
| Cell
#1 |
Cell
#2 |
| Cell
#3 |
Cell
#4 |
|
<table
width="200" border="0" cellspacing="1" cellpadding="5" bgcolor="#330099"
>
<tr>
<td bgcolor="#FFFFFF" align="center"> Cell #1 </td>
<td bgcolor="#FFFFFF" align="center"> Cell #2 </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center" > Cell #3
</td>
<td bgcolor="#FFFFFF" align="center"> Cell #4</td>
</tr>
</table>
|
View
the source code, print it, and see if you can locate the HTML for
this table. Then see how much of the rest of the layout you can
discern. This entire website was designed using tables for postioning
of the text and images.
|
