Tables &
Frames
Tables
Originally
created to display information in rows and columns.
Many
designers (like me!) use tables to help control the layout of the page.
The
Table Tag <table> </table>
The table
row and data cell tags must reside with the table
Common
attributes
width
#
(absolute) in pixels or % (relative)
align
left, center, right
border
0 =
no border
bgcolor/background
· Captions <caption>
</caption>
Must follow
the <table> tag
Common
attributes
align
left, center, right, top, bottom
Table Header <th> </th>
Centers and
emphasizes text
Common
Attributes
colspan
#
bgcolor/background
align
left, center, right (default is center)
Table
Row <tr> </tr>
Instructs
the Web browser of the beginning and end of a row.
Tables are
built one row at a time
Common
attributes
align
left, center, right
valign
top, middle, bottom
bgcolor /
background
Table
Data Cell <td> </td>
Created left
to right
Tags must
between the row <tr> </tr> in which the cells reside
Common
Attributes
align
left, center, right
width
# in
pixels or %
bgcolor /
background
valign
top, center, middle
colspan
#
rowspan
#
Cellpadding & Cellspacing
Additional
Table Attributes
Cellpadding
= #
the amount of space between the border of the cell and the contents
(default is 1 pixel).
Cellspacing
= #
the amount of space between cells (default is 2 pixels). Creates wider, shaded borders between cells.
Frames
Divides the
browsers window into smaller sub-windows.
Each
sub-window displays a different HTML document
Note: Many people do not like frames
know your
audience!!! (Or create an option to view the site without frames.)
Frame
Structure
Determine
the number of sub-windows your page will host.
You will
need to create an HTML document for each sub-window PLUS the primary site.
Main
HTML Document
<frameset>
</frameset> defines a collection of frames
Defines the
width or height of your frame, along with the name & source of each frame
Does NOT
include <body> </body> tags
Building the Page
Frameset
Structure <frameset> </frameset>
Common
Attributes
cols
# of
pixels or % (vertical)
rows
# of
pixels or % (horizontal)
Setting the Frames <frame> </frame>
Points to
the HTML documents which will be viewed in the frame
Common
Attributes
src
HTML
document
name
scrolling
yes, no, auto (default)
noresize
Targeting
Frames
By default,
when clicking on a document link, the new document will appear in the same
sub-window.
To open a
document in a specific sub-window, place a target attribute in the <a>
tag of the frame name
<frame
src=leftside.html name=left>
<a
href=links.html target=left>