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

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.

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.

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

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.

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

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.

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

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

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.

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.

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.

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.

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.

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

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.

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.

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

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

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.

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.

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.

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.

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.

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

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

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

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

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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

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

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

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

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

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

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.

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

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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

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.

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

  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.

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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

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.

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.

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

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

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

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

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.

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.