Dreamweaver
Activities
Tables
Tables play a very important part in web page layout and design.
Tables can be used to display tabular data, align text, provide an
entire page template or be used to contain individual sections of
a larger image. Any item that can be added to your web page can be
added a table, even another table (nested table). Below are some
table basics.
Description of Table Components
The Basics:
Tables are made up of rows that run horizontally and columns
that run vertically. Individual table components are called cells.
Tables
can be aligned left, middle and center on a page.
This is an example of a table with 3 columns and 4 rows.
Width - Table width on a web page is determined
either by the percent of width of a window (i.e. 100%), or a fixed
pixel width (i.e. 600).
Table widths based on percents change, depending on the browser
window size of the viewer while pixel widths will remain constant
regardless
of the browser window size. See example Border - The width of the border around the table. This can range
from zero for no border to as wide as you wish to make it. Smaller
is usually better.
Cell Padding - The space between the edge of the
cell and the contents of the table. A zero will leave no cell padding.
If the contents
of a table appear to be running together you can change the cell
padding to a larger number.
Cell Spacing - The space between each individual
cell of the table. A zero will leave no spacing between cells and
will allow background
colors and images to merge together. Otherwise you could end up
with white lines between your cells.
Background Colors - You can
specify colors for the entire table, selected rows or individual
cells. Colors specified in a cell will
override the color of a row or table.
Procedure for Inserting a Table
1. Determine where you want to insert the table
and place your cursor at that location.
2. Click on the Insert Table button in the Objects
window
or go to the Insert menu item and down to Table.
3 You will then see the following window:
4 Enter:.
The number of Rows for your table.
The number of Columns for your table.
The Width of your table and whether you want to use a Percent
or Pixel width.
The Border width of your table.
The Cell Padding for your table.
The Cell Spacing for your table.
5. Click on OK. Your table will be displayed on
your web page at the location where your cursor was flashing.
Table Contents
Tables can contain text, images, links, forms, JavaScript, Flash
or any other type of web content.
Editing Tables
Dreamweaver makes changing tables easy. Following is the information
you need to make most changes to your entire table, rows or
individual cells. Description of the Table Section of the Properties Window
All of the changes you make to a table can be made in the lower
section of the Properties window.
The lower display will change depending on the item which you have
selected.
Cell selection will display the single cell shown here in the lower
left-hand corner.
Row selection will appear as shown here.
Column selection will appear
as shown here.
Horiz. and Vert. places the contents within a cell.
A selected Table will change the entire Properties window.
Process
for Making Changes to an Entire Table
Following are descriptions of some basic changes you can make using
the Properties window. All of these changes are made by entering
a change and pressing return/enter on the keyboard.
To select a Table:
Click anywhere in the table and go to the Modify menu item, down
to Table and across to Select Table, OR, click and drag across
the entire table.
The Properties window
To make changes to
the:
Number of rows and columns - Change the number of rows or columns
your table contains enter a different number and hit Enter/Return
on your keyboard.
Width or height - table width and height is set by using either
percent (%) of window (size changes depending on window size)
or pixel width
(size is maintained regardless of window size). Determine which
you want and enter the changes in the following section. Use
the pop-up
menu to select pixels or %.
Cell Padding and Cell Space - Enter the number you want for these
two items.
Table background - Select either an image or a color for a background.
To select an image, click on the folder and locate the image you
wish to use. To select a background color, click on the square
box next to Bg and select a color from the color table that opens
up.
Table border - Border must be set at one or more. Use either the:
Light/Dark border for a shadow effect. Light color on top and Dark
on the bottom.
Brdr button – Pick one solid color.
Process for Making Changes
to Cells, Rows and Columns
To make changes to individual components of a table, use the lower
portion of the Properties window. The choices for making changes
to a cell, row and column are the same. You need to select a cell,
row or column before you can change it.
To select a:
Row - move the arrow to the left edge of the row and you will see
a black arrow. Click when you see the black arrow or click and
drag across the entire row.
Column - move the arrow to the top of the table until you see a black
arrow and click or click and drag across the entire column. You will
select the entire column of the table.
Individual Cells - Clicking in a cell will display the cell attributes
in the lower portion of the Properties window.
To change:
Horizontal and Vertical alignment - This determines the alignment
of text or images within each cell, row or column. Click on the
pop-up menus and select your alignment choices.
Width or Height - cell, row and column, width and height is set
by using pixel width (size is maintained regardless of window size).
Determine the width you want and enter the changes in the following
window.
Background - A cell, row or column can have an image or a color
as a background. To select an image as a background, click on the
folder and locate the image you wish to use.
To change the background color, click on the square box next to Bg
and select a color from the color table that opens up.
To select a Border color click on Brdr and select a color.
|
