|
Art
444 Lecture Notes
Using HTML Tables
for Web Page Layout
Understanding HTML tables is one of the most important concepts for web
designers. Designed originally to contain data in a graphic grid fashion,
savvy web designers now use tables to control page layout. Tables can contain
text, images and other data. They can be "nested" into another
table to create a more complex layout. You add tables in Dreamweaver by
clicking on the Insert Table icon on the Common Objects Palette and
filling out the attributes for the table.
To select
tables and cells when working in Dreamweaver, use the Tag Selector
buttons located in the bottom left of the document window.
This is especially
helpful when you are trying to select a nested table. Tables can also
be selected with the hand cursor after you move over the upper left-hand
corner of the table. Click or type into individual cells to select or
add/delete data. Modify tables through Modify> Table in the menu.
Tags for
generating HTML Tables:
<TABLE></TABLE>
-Creates a table
<TR></TR> -Indicates the start and end of a row
<TD></TD> -Marks the content of each cell
NOTE: Tables, rows, and cells can have width & height attributes in
both pixels or percentages and combinations of both.
BORDER=#
of pixels -Creates a table with a beveled border
CELLPADDING=# of pixels -Creates a "cushion" of space
around the content in each cell
CELLSPACING=# of pixels -Creates space between and around each
cell
BORDERCOLOR="#009999" -Creates a colored table or cell border
BGCOLOR="#CCFFCC" -Creates a colored background in a table or cell.
<TD
COLSPAN=# > -Allows one row to span more than one column
<TD ROWSPAN=#> -Allows one column to span more than one
row
<TD
VALIGN="top, bottom or middle"> -Vertically aligns the content
within each cell
<TD ALIGN="left, center or right"> -Horizontally aligns
the content within each cell
| |
|
This is a ROWSPAN of 2 |
| This is a COLSPAN of 2 |
| |
|
|
Here is
the HTML code for the table above:
<table
width="400" height="150" cellspacing="10"
cellpadding="5" align="center" bordercolor="#006666"
border="3">
<tr>
<td> </td>
<td width="100"> </td>
<td rowspan="2" align="right" valign="bottom"><font
face="Verdana, Arial, Helvetica, sans-serif" size="1">This
is a ROWSPAN of 2</font></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><font
face="Verdana, Arial, Helvetica, sans-serif" size="1">This
is a COLSPAN of 2</font></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td bgcolor="#99CCCC"> </td>
</tr>
</table>
NOTE:
stands for non-breaking space and is used in cells that contain no content.
Table
to create page margins:
The HTML code below will create an invisible table 400 pixels wide displaying
the text with margins on both sides. The trick is to remember to center
the table itself.
<table
width="400" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif"
size="2">My primary concern "Transformation of Ceres
into a Madonna" is the transfiguration of symbols that represent
pagan deities and religions into Christian saints and rituals. What is
their meaning in our modern society? What, if any, residual knowledge
has trickled down to us? Another central issue of this piece is the female
role as spiritual leader in these early pagan religions before the conversion
to male dominated Christianity. </font></td>
</tr>
</table>
Centering
content vertically and horizontally
within the browser window:
This invisible percentage-based table centers content vertically
and horizontally within the browser window and works on resize. This technique
works well for a splash or intro page graphic. Below is the HTML code:
<table
width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><font
face="Verdana, Arial, Helvetica, sans-serif" size="2">This
text will be centered no matter how big you open your browser!</font></td>
</tr>
</table>
Dreamweaver centering table:
Insert bar> Layout (select Standard view tab) and click the little grid (table) icon. In the table attributes window type rows: 1, columns: 1, table, width= 100%. Border, cellpadding and cellspacing should all be set to 0. The table will now appear in the document's window. You will need to change the table's cell horizontal alignment tab to "center" and the vertical alignment tab to "middle". Now you can insert your media into the table as centered.
Note: The height tag is now obsolete and does not work properly without the code below. To work around this add the following CSS style in the head of your document:
<style>
html, body, table {height:100%}
</style>
Nested
Tables:
Nesting tables within tables allows you to create more complex pages
with greater control over page layout. It is best to create a layout table
for your entire page first and then "nest" individual tables
within the main layout. These nested tables can contain sliced graphics
for a top navigation system, etc. Nesting tables allows for quick changes
rather than recreating the entire page layout when you need to create
updates. To see nested tables in action, click here
(I designed this iste with IBM.) Use the browser's "View Source"
feature to view HTML code of the page. Select it and copy & paste
the code into Dreamweaver to study how it was built. Notice that the lefthand
navbar is a single entity and removable from the main table created for
layout. Select nested tables in Dreamweaver by clicking on the Tag Selector
on the bottom left-hand of the document window.
Creating
outlined boxes with nested tables:
Below is a nested table layout used to create an outlined box effect.
The bottom table is the one that creates the lined effect - it is a table
with a designated bgcolor and is 2 pixels larger (vertically & horizontally)
than the nested table on top of it. Make sure you also vertically and
horizontally center the top nested table in the <TD> of the table
below it. When you designate the bgcolor of the table on top to your page's
background color it gives the appearance of an outlined box with no bevel
effect - which is what happens when you try to create this effect by simply
designating a border for your table (see above). Check out Yahoo
pages to see this technique in action.
|