2. DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Copyright 2005, Paradigm Publishing Inc.

3. Performance Objectives
Understand tables and table elements.
Understand how tables are used for layout control.
Create tables in Standard mode.
Create proportional-width and fixed-width tables.
Select tables and table elements.
Use the Expanded Tables mode to aid table and cell selection.
Use the Tab and arrow keys to navigate inside tables.
Use the Table Property inspector and Table Cell Property inspector to format tables.
Copyright 2005, Paradigm Publishing Inc.

4. Performance Objectives…/2
Add and delete columns and rows.
Merge and split cells.
Create nested tables.
Format tables using the Format Table command.
Create tables in Layout mode.
Create autostretch tables in Layout mode.
Understand and use spacer images.
Use a grid when working with tables.
Sort table content.
Copyright 2005, Paradigm Publishing Inc.

5. Understanding Tables Tables are used to control page layout.
table borders
visible
Copyright 2005, Paradigm Publishing Inc.

6. Table Components Tables are grids composed of rows and columns.
The intersection of each row and column is a table cell.
The space between cells is cell spacing.
The distance between content and cell borders is cell padding.
Backgrounds can be colored or contain a background image.
Borders can be colored or invisible.
Copyright 2005, Paradigm Publishing Inc.

7. Table Components…/2 column table cell cell padding row table border
cell spacing
Copyright 2005, Paradigm Publishing Inc.

8. Table Dimensions By default, tables will shrink to fit their contents.
Fixed widths are indicated in pixels and content will expand to fit the content.
Proportional widths are indicated in percentages and are relative sizes.
Copyright 2005, Paradigm Publishing Inc.

9. Table Dimensions…/2 unspecified width fixed width proportional width
Copyright 2005, Paradigm Publishing Inc.

10. Table Dimensions…/2
Manually resize a selected table by dragging its table selection handles.
table selection
handles
Copyright 2005, Paradigm Publishing Inc.

11. Table Code Basic tables use table tags (<table>).
Rows use table row tags (<tr>).
Cells use table data cell tags (<td>).
Empty table cells contain a nonbreaking space (&nbsp) to prevent empty cells from collapsing.
HTML code
and table
Copyright 2005, Paradigm Publishing Inc.

12. Using Tables to Control Page Layout
Designers try to create layout tables that will maintain their design integrity when viewed across different browser scenarios by using tables with:
fixed widths
proportional widths
a combination of both fixed and proportional widths
Copyright 2005, Paradigm Publishing Inc.

13. Fixed-Width Tables
Fixed-width tables maintain their appearance when viewed using different screen and browser combinations.
On large screens, there can be a lot of wasted space next to or on either side of the table.
On smaller screens, a portion of the table might disappear off the right side of the browser window.
Copyright 2005, Paradigm Publishing Inc.

14. Proportional-Width Tables
The table maintains its relative dimensions regardless of the screen and browser combinations.
The designer loses control over lines and spacing as the table and/or column widths stretch or decrease.
Copyright 2005, Paradigm Publishing Inc.

15. Combination Tables
Tables that contain a combination of fixed and proportional widths are a common compromise solution.
Use fixed widths to maintain control over segments that need to remain stable.
Use proportional widths to allow other segments to flow to fit browser windows.
Copyright 2005, Paradigm Publishing Inc.

16. proportional-width table
Table Examples
proportional-width table
fixed-width table
Copyright 2005, Paradigm Publishing Inc.

17. for navigation buttons proportional-width column
Table Examples…/2
fixed-width column
for navigation buttons
proportional-width column
for text
Copyright 2005, Paradigm Publishing Inc.

18. Creating Tables    Set the mode to Standard Mode. click View
point to Table Mode 
make sure there is a check mark to the left of Standard Mode
Copyright 2005, Paradigm Publishing Inc.

19. Creating Tables…/2    click the Table button OR click Insert
click Table
Copyright 2005, Paradigm Publishing Inc.

20. Creating Tables…/3 specify table properties specify accessibility
Copyright 2005, Paradigm Publishing Inc.

21. Making Borders Visible
click View 
point to Visual Aids 
make sure there is a check mark to the left of Table Borders
Copyright 2005, Paradigm Publishing Inc.

22. Selecting Table Elements
Dreamweaver MX 2004 features an Expanded tables mode that temporarily adds cell padding and spacing.
Expanded
button
exit link
expanded
table
Copyright 2005, Paradigm Publishing Inc.

23. Selecting Table Elements…/2
Another method to enable Expanded Tables mode is to use the Menu bar. 
click View 
point to Table Mode 
make sure there is a check mark to the left of Expanded Tables Mode
Copyright 2005, Paradigm Publishing Inc.

24. Selecting Tables Using the Table Header
Click inside a table to display the table header. 
click the down-pointing arrow 
click Select Table
Copyright 2005, Paradigm Publishing Inc.

25. Selecting Tables Using the Mouse
Click a table’s upper or lower border.
The insertion point will transform into a small table grid icon.
table grid icon
Copyright 2005, Paradigm Publishing Inc.

26. Selecting Tables Using the Tag Selector
selected table with
selection handles 
click the table tag
Copyright 2005, Paradigm Publishing Inc.

27. Selecting Tables Using the Menu Bar
click Modify 
point to Table 
click Select Table
Copyright 2005, Paradigm Publishing Inc.

28. Selecting Cells Using the Tag Selector
click inside the cell 
click the table data cell tag
Copyright 2005, Paradigm Publishing Inc.

29. Selecting Cells Using the Menu Bar
click Edit 
click Select All
Copyright 2005, Paradigm Publishing Inc.

30. Selecting Cells Using the Keyboard
Hold down the Ctrl key while clicking in a cell.
selected cell
Copyright 2005, Paradigm Publishing Inc.

31. Selecting Rows and Columns Using the Mouse
Place the pointer on the outer border of a row or column.
After the selection arrow appears, you can click the mouse button to select.
selection arrow
selected row
Copyright 2005, Paradigm Publishing Inc.

32. Selecting Rows and Columns Using the Keyboard
Click inside a cell, and without releasing the mouse button, drag the pointer across the cells to be selected.
Click inside a cell, hold down the Shift key, and then click inside another cell to select all cells located between the first and last cell selected.
Copyright 2005, Paradigm Publishing Inc.

33. Selecting Columns Using the Column Header
Click inside a column to display the column header. 
click the down-pointing arrow 
click Select Column
Copyright 2005, Paradigm Publishing Inc.

34. Selecting Rows Using the Tag Selector
click the
table row tag
Copyright 2005, Paradigm Publishing Inc.

35. Selecting Nonadjacent Cells
Hold down the Ctrl key, click inside one cell, and then click inside the other cells to be selected.
Click inside a cell that is already selected to deselect it.
selected nonadjacent cells
Copyright 2005, Paradigm Publishing Inc.

36. Navigating in Tables Using the Tab Key
Pressing the Tab key moves the insertion point to the next cell.
The insertion point travels in a left-to-right, top-to-bottom direction.
Holding down the Shift key while pressing the Tab key reverses the tab direction.
Pressing the Tab key creates a new row when the last cell in a table is reached.
Copyright 2005, Paradigm Publishing Inc.

37. Navigating in Tables Using the Arrow Keys
The Up, Down, Left, and Right Arrow keys can be used to navigate inside a table.
The arrow keys first navigate within a cell’s contents and then move on to the next cell.
The arrow keys cannot be used to create new rows.
Copyright 2005, Paradigm Publishing Inc.

38. Using the Property Inspector to Format
When a table is selected, the Property inspector opens in Table Property inspector mode.
When a cell is selected, the Property inspector opens in Table Cell Property inspector mode.
Cell and row background formatting will override table formatting.
The order of precedence is cell, row, table.
Copyright 2005, Paradigm Publishing Inc.

39. Table Property Inspector
type a name
or number to
identify a table
specify the number
of rows and columns
specify the width and height
in pixels or percent
specify a
background color
specify a
border color
use the dimension
buttons to clear
heights and
convert widths
specify a background
image file location
Copyright 2005, Paradigm Publishing Inc.

40. Table Property Inspector…/2
specify the space between
a cell’s contents
and its borders
specify the space
appearing between
adjacent cell borders
specify table
alignment
specify table border
width in pixels
display the
CSS class style
applied to table
Copyright 2005, Paradigm Publishing Inc.

41. Table Cell Property Inspector
specify the horizontal
alignment
prevents text from
wrapping to a new line
specify the width and height in
pixels or as a percentage
specify the vertical
alignment
Copyright 2005, Paradigm Publishing Inc.

42. Table Cell Property Inspector…/2
center and bold
cell text, and use to create
table headers
specify a background image
file location
split a
selected cell
specify the
border color
merge selected cells, rows, or columns
specify the
background color
Copyright 2005, Paradigm Publishing Inc.

43. Adding Rows and Columns Using the Menu Bar
click Modify 
point to Table 
click an option OR
click to open the Insert Rows or Columns dialog box
Copyright 2005, Paradigm Publishing Inc.

44. Adding Rows and Columns Using the Context-sensitive Menu
right-click 
point to Table 
click an option
Copyright 2005, Paradigm Publishing Inc.

45. Adding Rows or Columns Using the Table Property Inspector
type a new value to increase
the rows or columns
Copyright 2005, Paradigm Publishing Inc.

46. Adding Columns Using the Column Header
Click inside a column to display the column header. 
click the down-pointing arrow 
click an option
Copyright 2005, Paradigm Publishing Inc.

47. Deleting Rows and Columns Using the Menu Bar
click Modify 
point to Table 
click an option
Copyright 2005, Paradigm Publishing Inc.

48. Deleting Rows and Columns Using the Menu Bar…/2
Select the entire row or column. 
click Edit 
click Clear
Copyright 2005, Paradigm Publishing Inc.

49. Deleting Rows and Columns Using the Context-sensitive Menu
right-click 
point to Table 
click an option
Copyright 2005, Paradigm Publishing Inc.

50. Deleting Rows or Columns Using the Table Property Inspector
type a new value to decrease
the rows or columns
Copyright 2005, Paradigm Publishing Inc.

51. Deleting Rows or Columns Using the Keyboard
select the row
or column 
press the Delete
or Backspace keys
Copyright 2005, Paradigm Publishing Inc.

52. Deleting Rows Using the Tag Selector
click the
table row tag 
press the Delete
or Backspace keys
Copyright 2005, Paradigm Publishing Inc.

53. Creating Nested Tables
A nested table is a table inserted inside another table.
The table containing the nested table is called the parent table.
Nested tables can be formatted like any other table.
The width is determined by the width of the table cell they are contained in.
Nested tables can be inserted within other nested tables.
Tables should not be nested more than three deep.
Copyright 2005, Paradigm Publishing Inc.

54. Creating Nested Tables…/2
parent table
nested table
Copyright 2005, Paradigm Publishing Inc.

55. Using the Format Table Command
Use as an alternative to formatting tables with the Table Property inspector. 
click Commands 
click Format Table
Copyright 2005, Paradigm Publishing Inc.

56. Using the Format Table Command…/2
select the
desired options
Copyright 2005, Paradigm Publishing Inc.

57. Creating Tables in Layout Mode
Layout mode allows you to draw cells and move them. 
click View 
point to
Table Mode 
make sure there is
a check mark to the
left of Layout Mode
Copyright 2005, Paradigm Publishing Inc.

58. Creating Tables in Layout Mode…/2
Another method is to use the Insert bar Layout menu item or tab. 
click the Layout button
click the exit link on the Layout mode bar to
return to Standard Mode
Copyright 2005, Paradigm Publishing Inc.

59. Drawing Tables and Cells
Tables and cells are created using buttons on the Insert bar Layout menu item or tab.
Layout Table button
Draw Layout Cell button
Copyright 2005, Paradigm Publishing Inc.

60. Drawing Tables Click the Layout Table button.
Move the insertion point to an empty area.
The insertion point changes into crosshairs.
Drag to create the table.
When the table is created, its width appears in the table header display.
Tables appear outlined in solid green.
Copyright 2005, Paradigm Publishing Inc.

61. Drawing Cells Click the Draw Layout Cell button.
Move the insertion point to an empty area.
The insertion point changes into crosshairs.
Drag to create the cell.
Hold down the Alt key to temporarily cancel the snap option.
When the cell is created, its width appears in the table header display.
Cells appear outlined with dotted blue lines.
Positioning cells appear as gray (empty).
Copyright 2005, Paradigm Publishing Inc.

62. Table Dimensions column widths in pixels table width in pixels
Copyright 2005, Paradigm Publishing Inc.

63. Selecting Layout Tables and Cells
Place the pointer over the cell’s border until it turns red, and then click once.
Another method is to hold down the Ctrl key and click once in the desired cell.
Selecting a cell and pressing the Delete or Backspace keys will remove it.
Copyright 2005, Paradigm Publishing Inc.

64. Resizing Layout Tables and Cells
Selection handles appear when tables and cells are selected.
Resize by clicking a handle and dragging in the desired direction.
table cell
table
empty
area
selection
handles
Copyright 2005, Paradigm Publishing Inc.

65. Moving Layout Tables and Cells
Move layout cells by clicking on their border and dragging them.
More precise positioning can be obtained by selecting a cell and pressing an arrow key to move the cell 1 pixel at a time.
Hold down the Shift key and pressing an arrow key moves a cell 10 pixels at a time.
Copyright 2005, Paradigm Publishing Inc.

66. Using Autostretch
Liquid or flexible tables containing one autostretch column will automatically adjust to fit different browser window sizes.
An autostretch table has a width of 100 percent.
The remaining columns have fixed widths. 
click the Autostretch
radio button in the Table Property inspector
Copyright 2005, Paradigm Publishing Inc.

67. Adding Spacer Images
Spacer images prevent empty cells from collapsing in autostretch tables.
Columns with spacer images are indicated by a double line.
spacer image
double line
Copyright 2005, Paradigm Publishing Inc.

68. Adding Spacer Images…/2
A dialog box appears when an autostretch table is created in a site for the first time.
This dialog box will not appear if a spacer image has already been saved in the site.
Copyright 2005, Paradigm Publishing Inc.

69. Using a Grid
A grid assists in positioning cells and content within tables.
Copyright 2005, Paradigm Publishing Inc.

70.    Showing a Grid click View point to Grid click Show Grid
Copyright 2005, Paradigm Publishing Inc.

71. Snapping To Grid
The Snap to Grid feature automatically snaps cells to the nearest grid coordinate. 
click View 
point to Grid 
click Snap To Grid
Copyright 2005, Paradigm Publishing Inc.

72. Changing Grid Settings
click View 
point to Grid 
click Grid Settings
Copyright 2005, Paradigm Publishing Inc.

73.   Sorting Table Content Tables can be sorted on one or two columns.
Tables that contain merged cells cannot be sorted. 
click Commands 
click Sort Table
Copyright 2005, Paradigm Publishing Inc.

74. Sorting Table Content…/2
Apply the appropriate properties in the Sort Table dialog box.
Copyright 2005, Paradigm Publishing Inc.

75. COMMANDS REVIEW    How do you add a column? click Modify
point to Table 
click Insert Column
Copyright 2005, Paradigm Publishing Inc.

76. COMMANDS REVIEW…/2    How do you add a row? click Modify
point to Table 
click Insert Row
Copyright 2005, Paradigm Publishing Inc.

77. COMMANDS REVIEW…/3   How do you create a table? click Insert
click Table
Copyright 2005, Paradigm Publishing Inc.

78. COMMANDS REVIEW…/4    How do you delete a column? click Modify
point to Table 
click Delete Column
Copyright 2005, Paradigm Publishing Inc.

79. COMMANDS REVIEW…/5    How do you delete a row? click Modify
point to Table 
click Delete Row
Copyright 2005, Paradigm Publishing Inc.

80. COMMANDS REVIEW…/6
How do you delete a selected table, row, column, or cell? 
click Edit 
click Clear
Copyright 2005, Paradigm Publishing Inc.

81. COMMANDS REVIEW…/7    How do you enable Expanded Tables mode?
click View 
point to Table Mode 
make sure there is a check mark to the left of Expanded Tables Mode
Copyright 2005, Paradigm Publishing Inc.

82. COMMANDS REVIEW…/8    How do you enable Layout mode? click View
point to
Table Mode 
make sure there is
a check mark to the
left of Layout Mode
Copyright 2005, Paradigm Publishing Inc.

83. COMMANDS REVIEW…/9    How do you enable the Snap to Grid feature?
click View 
point to Grid 
click Snap To Grid
Copyright 2005, Paradigm Publishing Inc.

84. COMMANDS REVIEW…/10    How do you enable Standard mode? click View
point to Table Mode 
make sure there is a check mark to the left of Standard Mode
Copyright 2005, Paradigm Publishing Inc.

85. COMMANDS REVIEW…/11
How do you make borders visible in the Document window? 
click View 
point to Visual Aids 
make sure there is a check mark to the left of Table Borders
Copyright 2005, Paradigm Publishing Inc.

86. COMMANDS REVIEW…/12   How do you open the Format Table dialog box?
click Commands 
click Format Table
Copyright 2005, Paradigm Publishing Inc.

87. COMMANDS REVIEW…/13
How do you open the Grid Settings dialog box? 
click View 
point to Grid 
click Grid Settings
Copyright 2005, Paradigm Publishing Inc.

88. COMMANDS REVIEW…/14
How do you open the Insert Rows or Columns dialog box? 
click Modify 
point to Table 
click to open the Insert Rows or Columns dialog box
Copyright 2005, Paradigm Publishing Inc.

89. COMMANDS REVIEW…/15   How do you select a cell? click Edit
click Select All
Copyright 2005, Paradigm Publishing Inc.

90. COMMANDS REVIEW…/16    How do you select a table? click Modify
point to Table 
click Select Table
Copyright 2005, Paradigm Publishing Inc.

91. COMMANDS REVIEW…/17    How do you show a grid? click View
point to Grid 
click Show Grid
Copyright 2005, Paradigm Publishing Inc.

92. COMMANDS REVIEW…/18   How do you sort table content? click Commands
click Sort Table
Copyright 2005, Paradigm Publishing Inc.

93. COMMANDS SUMMARY Add a column Modify, Table, Insert Column Add a row
Modify, Table, Insert Row
Create a table
Insert, Table
Delete a column
Modify, Table, Delete Column
Delete a row
Modify, Table, Delete Row
Delete a selected table, row, column, or cell
Edit, Clear
Enable Expanded Tables mode
View, Table Mode, Expanded Tables Mode
Enable Layout mode
View, Table Mode, Layout Mode
Enable snap to grid
View, Grid, Snap To Grid
Copyright 2005, Paradigm Publishing Inc.

94. COMMANDS SUMMARY…/2 Enable Standard mode
View, Table Mode, Standard Mode
Make borders visible in Document window
View, Visual Aids, Table Borders
Open Format Table dialog box
Commands, Format Table
Open Grid Settings dialog box
View, Grid, Grid Settings
Open Insert Rows or Columns dialog box
Modify, Table, Insert Rows or Columns
Select a cell
Edit, Select All
Select a table
Modify, Table, Select Table
Show a grid
View, Grid, Show Grid
Sort table content
Commands, Sort Table
Copyright 2005, Paradigm Publishing Inc.