Adobe Dreamweaver CS3 Revealed

CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE

Chapter 5 Lessons

1. Create a table

2. Resize, split, and merge cells

3. Insert and align images in table cells

4. Insert text and format cell content

Tables

Are placeholders made up of small boxes (cells), into which you can insert text and graphics

Consist of cells

Arranged horizontally in rows and vertically in columns

Give you control over the placement of each object

Inserting Graphics and Textin Tables

Control placement of elements in relation to each other

Specify amount of space between each page element

Always plan how your table will look with all the text and graphics in it

Even a rough sketch will save you time

Create a Table

Understanding table modes

Creating a table in standard mode

Planning a table

Setting table accessibility preferences for tables

Drawing a table in layout mode

Understanding Table Modes

There are two ways to create a table:

Click Table on the Insert bar

Click View, Table Mode, Layout Mode; then click the Draw Layout Table button or the Draw Layout Cell button

Anatomy of a Table

Cell

Border

Row

Cell Spacing

Anatomy of a Cell

Vertical alignment

Horizontal alignment

Width

Height

Text Wrap

Border color

Border width

Background image

Background color

Cell

Anatomy of a Row

Vertical alignment

Horizontal alignment

Width

Height

Text Wrap

Border color

Border width

Background image

Background color

Row

Anatomy of a Table

Rows

Columns

Width

Cell padding

Cell spacing

Alignment

Border color

Border width

Background color

Background graphic

table

Standard Mode

Useful when you want to create a table with a specific number of columns and rows

Use the Table dialog box to set:

Rows, columns, border thickness, table width, cell padding, and cell spacing

Planning a Table

Sketch a plan for a table that shows its location on the Web page and the placement of text and graphics in its cells

Decide whether to include borders around the tables and cells.

Setting the border value to 0 causes the table to appear invisible, so that viewers will not realize that you used a table for the page layout unless they look at the code

Accessibility Preferences

To make a table more accessible to visually handicapped viewers, add

Table caption

Table summary (does not appear on screen)

Table headers

Can be placed at the top or sides of table

Are automatically centered and bold

Drawing a Table in Layout Mode

Ideal when placing elements on a Web page without specifying number of rows and columns

Draw Layout Cell button

Layout Table button

Fig. 3: Sketch of Table on Café Page

Table properties

Header options

Accessibility options

Fig. 4: Table Dialog Box

Expanded Tables Mode

Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing

Easier to actually see how many rows and columns you have in your table

The Expanded Tables mode allows you to see each cell clearly

Displays more space between cells for

easier editing

Fig. 6: Expanded Tables Mode

Table displayed in layout mode

Layout tab

Fig. 8: Table in Layout Mode

Standard mode button

Expanded mode button

Resize, Split and Merge Cells

You can resize the rows or columns manually or by entering numbers in the properties inspector

You can also take one cell and split it into two or more cells

You can take two or more cells and merge them into one cell

Cell tag icon

W text box

Selected cell

Fig. 9: Selecting a Cell

Resizing pointer

Fig. 10: Resizing the Row Height

Number of rows text box

Splits cell into Rows or Columns button

Fig. 11: Splitting a Cell into Two Rows

Two cells split from one

Fig. 12: Splitting One Cell into Two

colspan tag

Fig. 14: Code View for Merged Cells

Insert Images in Table Cells

Use the Image command on the Images Menu on the Insert bar

Drag it from the Assets panel into cell

Aligning Images in Table Cells

You can align graphics horizontally and vertically within a cell

Use the Horz (or Vert) alignment option in the Property inspector

To control spacing between cells, use cell padding and cell spacing

Vertical alignment options

Fig. 16: Vertically Aligning Cell Contents

cafe_logo.gif

cheesecake.jpg

Fig. 18: Images Inserted into Cells

Centered banner and navigation bar

Centered logo

Centered cheesecake

photo Left-aligned cafe photo

Fig. 20: Aligning Images in Cells

Inserting Text in a Table

Type

Copy/paste

Import

Format Cell Content

Easier to do in Standard mode than in Layout mode

Select the contents in the cell, then apply formatting to it

Can format each item individually or select the entire cell and format it

Formatting Cells

Different than formatting cell content

Can include setting properties that visually enhance the cell appearance

Cell width, background color, alignment

Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector

Image selected inside a cell

Properties for selected graphic

Fig. 21: Property Inspector Showing Options for Formatting Cell Contents

Properties for selected cell,

not image

Insertion point in cell

Fig. 22: Property Inspector Showing Options for Formatting a Cell

Imported text describing the cafe

Text typed into cell

Fig. 23: Importing and Typing Text into Cells

Importing Text

Can import delimited text file

Export as delimited text from

Spreadsheet program

Database program

Import tabular data to Dreamweaver

Top row header

Nested table

Fig. 25: Adding Nested Tables

Vert and Horz list arrows

Insertion point inside cell with no elements selected

Fig. 27: Formatting Cells Using Horizontal Alignment

Hide all visual aids option

Visual aids button

Fig. 29: Hiding Visual Aids

Dotted lines show borders are hidden

Chapter 5 Tasks

Create a table

Resize, split, and merge cells

Insert and align images in table cells

Insert text and format cell content