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