adobe dreamweaver cs5 on demand part 30 pdf

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

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

Tables are basically grids that 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

Table

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 quickly 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

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

5

4

3

2

1

6

5

◆ 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

Table in Standard 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

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 modify 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

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

◆ Delete Table Select the table,

and then press the Backspace

(Win) or Delete (Mac) key to

remove the table

To modify 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 modify the individual cells:

◆ Select Cell Click on the edge

of an active table cell, or

Ctrl-click (Win) or A-click (Mac)

anywhere in the cell

To select more than one 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