adobe dreamweaver cs5 on demand part 30 pdf

ptg
Working with Web Page
Tables
Introduction
Although tables give designers control over the positioning
of images and text on the page, tables were originally
intended for displaying tabular data, not for use in page lay-
out. Designers saw tables and thought that if they can hold,
position and control tabular data, maybe they can hold other
information. That started the use of tables for layout and
design.
In recent years, tables are being phased out as design ele-
ments and returning to their original position of displaying
tabular data. Tables for layout have been replaced by coding
the placement and style of elements using Cascading Style
Sheets.
This chapter will show you how to create and modify
tables in Dreamweaver. Creating a table in Dreamweaver is
basically a three-step process: Step one: insert the table, Step
two: modify the table to fit the specific design requirements of
the current page, and Step three: add the content (text, graph-
ics, etc.) to the individual cells.
8
8
What You’ll Do
Work with Tables
Switch Between Table Modes
Insert a Table in Standard Mode
Modify a Table
Add Content into a Table
Import and Export Table Data

Add Columns or Rows to Tables
Resize Columns and Rows
Split and Merge Cells
Sort Table Data
Change Table Properties
Change Cell, Row, or Column Properties
Use a Tracing Image
Create a Nested Table
185
From the Library of Wow! eBook
ptg
186 Chapter 8
Tables are basi cally grids t h at allow the
designer to precisely control the content of a
Web page. The three main mechanisms of a
table are rows, columns, and cells. A row
extends across the entire table from left to
right. Columns extend vertically from the top
to the bottom of the table. A cell is the area
where a row and column intersect. By default,
table cells will expand to fit the content
inserted into them.
If you're working in the design window,
Dreamweaver will visually display the table,
and allow you to expand or contract the table
or individual rows or columns with a simple
click and a drag.
Creating a table in Dreamweaver is basi-
cally a three-step process: Step one: insert the
table, Step two: modify the table to fit the

specific design requirements of the current
page, and Step three: add the content (text,
graphics, etc.) to the individual cells. Be
advised, that since tables can display differ-
ently in different and older browsers, it's
important to test your pages to make sure
what you see is what you're visitors are see-
ing. The following examples illustrate how a
Web page might appear in different browser
windows.
Working with Tables
Tabl e
From the Library of Wow! eBook
ptg
Chapter 8 Working with Web Page Tables 187
Switching Between
Table Modes
Switch Between Table Modes
Create a new Web page or open
the Web page you want to view.
Click the View menu, and then
click Design or click the Design
button to display the page in
Design mode.
Click the View menu, point to
Table Mode, and then select from
the following modes:
◆ Standard. Use to display a table
as it will appear in a Web
browser and edit it.

TIMESAVER
To q uickly return
to Standard mode, click the [Exit]
link in Expanded Tables, located at
the top center of the Document
window.
◆ Expanded Tables. Use to edit a
table. This mode adds cell
padding and spacing, and
increases border.
TIMESAVER
Press F6 to
switch to Expanded Tables mode.
◆ You can also click the Standard
or Expanded button on the
Layout tab on the Insert panel.
3
2
1
You can create tables using two different modes: Standard and
Expanded Tables. Each mode has its strengths and weaknesses.
Standard mode is useful for creating and displaying a table as it will
appear in a Web browser and adding and editing content. Expanded
Tables mode adds cell padding and spacing to all the tables in a docu-
ment and increases borders to make editing easier. For example, you
might use Expanded Tables mode to position the insertion point to the
left or right of an image, without inadvertently selecting the image or
table cell, and then switch back to Standard mode to make your
changes. By default, Dreamweaver starts you out in Standard mode.
1

3
2
Standard and
Expanded buttons
From the Library of Wow! eBook
ptg
188 Chapter 8
When you insert a table using Standard mode, you get a very ordered
table… think spreadsheet and you've got a pretty good idea of what
I'm talking about. And once the table is created, you can, if you choose,
to make changes in Standard or Expanded Table mode. You can add or
subtract cells from the table design, add any type of information
needed.
Inserting a Table in
Standard Mode
Insert a Table in Standard Mode
Open a Web page where you want
to insert a table.
Click to place the insertion point
for the new table.
Click the View menu, point to
Table Mode, and then click
Standard Mode.
◆ You can also click the Standard
Mode button on the Layout tab
on the Insert panel.
Click the Insert menu, and then
click Table.
Create a table using the following
options:

◆ Rows. Enter a value for the
number of rows in the table.
◆ Columns. Enter a value for the
number of columns in the table.
◆ Table Width. Enter a value
(pixels or percent), for the initial
width of the table.
◆ Border Thickness. Enter a
value for the border width of
the table.
◆ Cell Padding. Enter a value for
the number of pixels between a
cell's content and the cell
boundaries.
◆ Cell Spacing. Enter a value for
the number of pixels between
adjacent table cells.
5
4
3
2
1
6
5
From the Library of Wow! eBook
ptg
Chapter 8 Working with Web Page Tables 189
◆ Header. Select a position for a
header area in the table: None,
Left, Top, Both.

◆ Caption. Enter a table caption
(displays outside of the table).
◆ Align Caption. Click to align
where the table caption
appears in relation to the table:
default, top, bottom, left, right.
◆ Summary. Enter a table
description. Screen readers
read the summary text, but the
text does not appear in the
user's browser.
Click OK.
6
Tabl e i n Standa rd Mode
Did You Know?
You can change the highlight color for
table elements.
Click the Edit (Win) or
Dreamweaver (Mac) menu, click
Preferences, and then click
Highlighting. To enable or disable high-
lighting for table elements, select or
clear the Show check box for Mouse-
Over. To change the highlighting color
for table elements, click the Mouse-
Over color box, and then select a color.
When you’re done, click OK.
From the Library of Wow! eBook
ptg
190 Chapter 8

Modifying a Table
Modify the Table and Cells
Open the Web page containing the
table you want to modify.
Click the Design button to display
the page in Design mode.
Click the View menu, point to
Table Mode, and then click
Standard Mode or Expanded
Tables Mode.
◆ You can also click the Standard
or Expanded button on the
Layout tab on the Insert panel.
To m odify the table:
◆ Select Table. Click in the table,
click the Modify menu, point to
Table, and then click Select
Table, or click the table header
arrow, and then click Select
Table.
TIMESAVER
Click in the table,
and then press Ctrl+A (Win) or
A
+A (Mac) to select it.
◆ Resize Table. Select the table,
and then drag the control
points on the right table edge
to expand or contract the table.
4

3
2
1
After you create the initial table and cells, you can select, resize, move,
or even delete the table and cells to fine tune it. When you move or
resize a cell in a table, there are a few things you need to avoid. These
include overlapping cells, crossing the boundaries of the table, and
making the cell smaller than its contents. Before you can resize, move,
or delete a table or cell, you need to select it first. You can select the
table by clicking the table header arrow at the top or an outside table
edge, or select a cell by clicking a cell edge. When you select the table
or place the insertion point in the table, the widths of tables and cells
appear at the top or bottom of the table in pixels or as a percentage of
the page width. Next to the widths are arrows for the table and column
headers you can use to display a menu with related commands. When
you point to a table edge, Dreamweaver highlights it to make it easier
to see.
1
3
2
Tabl e h eader ar row
From the Library of Wow! eBook
ptg
Chapter 8 Working with Web Page Tables 191
◆ Delete Table. Select the table,
and then press the Backspace
(Win) or Delete (Mac) key to
remove the table.
To m odify columns or rows:
◆ Select Columns. Click in the

column, click the column
header arrow, and then click
Select Column.
◆ Select Columns or Rows. Click
the left edge of a row or the top
edge of a column, or drag to
select multiple columns or
rows.
◆ Resize Columns or Rows. Drag
the border to change the size;
for a column, the table keeps
its width. To change change
column width and keep column
width, shift-drag the column
border.
To m odify the individual c ells:
◆ Select Cell. Click on the edge
of an active table cell, or Ctrl-
click (Win) or A-click (Mac)
anywhere in the cell.
To s elect more t han on e cell,
drag from cell to cell, or Ctrl-
click (Win) or A-click (Mac)
multiple cells.
◆ Resize Cell. Select the cell, and
then drag any of the control
points on the cell edges to
expand or contract the size of
the selected cell.
◆ Delete Cell. Select the cell, and

then press the Backspace
(Win) or Delete (Mac) key to
remove the selected cell.
6
5
4
5
6
Column header arrow
From the Library of Wow! eBook