Macromedia Dreamweaver MX 2004 Demystified

Tables themselves aren't difficult to understand, but they're constructed from many bits and pieces, and working with them in Dreamweaver and in the browser is a complex process.

Tables in the Browser

In HTML, tables are created with the table tag. Each table consists of a number of rows, specified by tr (table row) tags. Each row consists of cells , specified by td (table data) or th (table header) tags. Nowhere is the number of columns specified; that's determined by the number of cells in the rows. The basic code framework for a two-row, two-column table looks like this:

<table> <tr> <th>[header cell contents here]</th> <th>[header cell contents here]</th> </tr> <tr> <td>[cell contents here]</td> <td>[cell contents here]</td> </tr> </table>

This table includes one row of header cells and one of regular data cells. Note that none of the tags involved requires any attributes. Various optional attributes determine how the table will look and behave, including dimensions, border, treatment of cell contents, and so on. Table 8.1 lists the most commonly used attributes and what they're for. Many more attributes are possible, some included in the HTML specification and others for use by particular browsers. (Check the Dreamweaver Reference panel for a more comprehensive list.)

Table 8.1. Commonly Assigned Attributes Used with Tables

Tables in HTML were originally developed for use in displaying tabular data (see Figure 8.1), but web designers adopted them for use in page layout (see Figure 8.2). With the advent of CSS positioning, tables should be reverting to their original use. However, inconsistent browser support of CSS means that, so far, tables are still the safest best for page layout.

Tables in Dreamweaver

Because tables are so important, Dreamweaver has a variety of tools and commands for working with them. Some are safer to use than others, and some are more intuitive than others. No matter what your working strategy is, you'll undoubtedly find something in here that you like.

Table Interface Choices

Of course, your first decision, as with anything in Dreamweaver, is whether you want to work with tables in Design view or Code view. But even within the Design view environment, you have choices. What should the table-making interface be like? What visual aids do you need?

Choosing a Table Mode

To choose a table mode, go to the View menu and choose from the options in the Table Mode submenu; or, in the Layout Insert bar, choose one of the three Table Mode buttons (as shown in Figures 8.38.5). In either case, you have three choices:

• Standard mode (View > Table Mode > Standard Mode) This default table mode displays tables in Design view approximately how they will look in the browser (see Figure 8.3). It's the mode most experienced Dreamweaver users prefer, but it can be awkward if your table includes a complex structure or tiny cells.

  Figure 8.3. A page layout table viewed in Standard mode.

• Expanded Tables Mode (View > Table Mode > Expanded Tables Mode) This mode, which is new to Dreamweaver MX 2004, displays tables in Design view with artificially added spacing between and within the cells, and with a visible border even if the table has no border (see Figure 8.4). This mode sacrifices some of the WYSIWYG qualities of Standard mode to make table structure easier to see and table elements easier to select and work with. Working in Expanded Tables mode is the same as working in Standard mode, but with some additional viewing assistance as you go.

  Figure 8.4. The same page layout table viewed in Expanded Tables mode.

• Layout Mode (View > Table Mode > Layout Mode) Layout mode is more than a means of viewing tables (see Figure 8.5); it's a whole alternative way of working with tables. Although it's very intuitive and attractive to web design beginners , it has its own set of dangers and can lead to badly structured pages. Layout mode is covered in depth later in this chapter (see the section "Working in Layout Mode").

  Figure 8.5. The same page layout table viewed in Layout mode.

Table-Viewing Aids

Whether you're working in Standard or Expanded Tables mode, you have a few extra bits of visual aids that you can call on in the Design view interface:

• Table Widths (View > Visual Aids > Table Widths) New to Dreamweaver MX 2004, the Table Widths visual aid shows a horizontal bar across the bottom or top of any selected table (see Figure 8.6). The bar indicates any table or cell dimensions. Clicking its triangle icons also gives you access to some extra help in selecting elements and setting table properties. The Table Widths visual aid works in either Standard or Expanded Tables modes.

  Figure 8.6. A selected table showing the Table Widths visual aid.

• Table Borders (View > Visual Aids > Table Borders) If you're working in Standard mode, this visual aid shows the edges of borderless tables as dotted lines, so the table structure is visible in Design view, even if it won't be in the browser (see Figure 8.7). Because Expanded mode includes always-visible borders, this aid isn't needed in that mode.

  Figure 8.7. A borderless table in Design view, with and without the Table Borders visual aid.

Inserting Tables

To insert a table (unless you're working in Layout mode), use the Table object in the Layout Insert bar, or choose Insert > Table. Both of these methods open the Insert Table dialog box (see Figure 8.8). In the dialog box, specify the basic structure of your table and click OK to insert the table. Note that, other than specifying rows and columns, you don't have to specify values for any table characteristics while inserting. Also, all table structure and attributes can be edited later through the Property Inspector, so nothing is set in stone here.

Selecting Tables

Working with tables means selecting tables, rows, columns, and cellsand that's not always easy. The more you're familiar with the different selecting options and techniques, the more efficiently you'll work with tables. The two main techniques for selecting are by clicking and dragging various items inside the Document window, and by using the Tag Selector. You can also use keyboard shortcuts to navigate around the table and select items within it. For the most part, use the method you like best; sometimes one method works better in a given situation than another, though, so it's a good idea to be familiar with all of them.

Selecting from Within the Document Window

Some people are just born clickers-and-draggers. Clicking something in the Document window is the most intuitive way to select things for most people. With tables, though, there are so many possibilities!

• Selecting individual cells First, if all you want to do is set cell properties in the Property Inspector, you don't have to actually select the cell. Just click inside the cell to put the insertion point there, and the cell's properties show up in the lower half of the Property Inspector. To actually select a cell, Ctrl/Cmd-click inside the cell. To select more than one cell at a time, Ctrl/Cmd-click in as many cells as you like. To select multiple contiguous cells, you can also place the cursor inside one cell and drag across as many cells as you like; or click in the first cell, hold down the Shift key, and click in another cell.

• Selecting rows Select a row by selecting all of the cells within it.

• Selecting columns You can select a column by selecting all of the cells within it. If the Table Width bar is showing, you can also click the triangle in the width indicator for that column and choose Select Column (see Figure 8.9).

  Figure 8.9. Using the Table Widths indicator to select a table column.

• Selecting the table Select the table itself by clicking its edge. This takes a surprising amount of hand-eye coordination. You also run the risk of accidentally dragging the edge of the tableand, therefore, resizing itwhile clicking. A handy, and safer, shortcut, is to right-click inside any table cell and choose Table > Select Table from the contextual menu. If the Table Width bar is showing, you can also click the triangle icon of the table width indicator and choose Select Table.

Selecting with the Tag Selector

The Tag Selector can be your best friend when you're working with tables. First, you can use it as an indicator of where you are in your table's structure. Click inside any cell, or select any cell or row, and the Tag Selector displays the structure of the table around you (see Figure 8.10). Plus, of course, the Tag Selector is great for selecting tags. Just click inside any cell to place the insertion point there; then click on the td tag in the Tag Selector to select the cell, the tr tag to select the row that encloses that cell, or the table tag to select the entire table. The Tag Selector is your author's favorite method of selecting tables.

The Tag Selector is less useful for selecting multiple elements or for selecting table columns (because columns have no tag associated with them).

Keyboard Navigation and Selection

Dreamweaver has made working with HTML tables very similar to working with tables in word-processing programs or spreadsheets, so your favorite keyboard-access methods from those other programs will work here, too.

To move from cell to cell, press Tab (move forward) or Shift+Tab (move backward). Or, use the arrow keys to move through the contents of your cells and to move from cell to cell.

To select a cell from the keyboard, make sure the insertion point is inside that cell and press Ctrl/Cmd+[ (that's the opening square bracket key). This is the keyboard shortcut for Edit > Select Parent Tag. When you have the first cell selected, you can select adjacent cells by pressing the arrow keys. Or, you can press Ctrl/Cmd+[ again to select the row containing that cell, and Ctrl/Cmd+[ again to select the entire table.

Setting Table Properties

Like just about everything in Design view, tables and cells have associated Property Inspectors to help you work with them. Select a table, and the Table Property Inspector appears (see Figure 8.11). Place the cursor inside any cell, and the lower half of the Property Inspector shows table cell properties (see Figure 8.12). Although table rows have no associated inspector, when all cells in a row are selected, the Property Inspector shows row properties in the cell property area.

Most of the properties shown in these two Inspectors match up to those shown in Table 8.1. Others can be looked up in the Reference panel (Window > Reference). Read over these few tips and "gotchas" about the Property Inspectors and their settings, though:

• Empty fields in the cellpadding and cellspacing fields mean that these properties won't be set, which means that the browser determines cellpadding and cellspacing . Most browsers add 2 pixels for each. To create a table with no cell padding or spacing, set both of these properties to 0.

• Aside from the table border property itself, most border- related properties (border color, individual cell borders, and so on) are non-standard HTML and won't work in all browsers. Use these with caution, preview carefully , and check the Reference panel as needed for more information.

• Although the width property is standard HTML, the height property is not. Assigning a height to tables or cells can also cause browser display problems. Avoid setting height unless you have to; if you do need to assign heights, be sure to preview carefully in all target browsers.

• Many properties dealing with a table's visual display, such as border , bgcolor , and alignment , can be more efficiently set using CSS. (See the discussion on CSS and your tables later in this chapter.)

• When you use the Background property to set a background image for your table, the chosen image tiles to fill the entire background. Netscape 4 doesn't display this tiling correctly.

Changing Table Size and Structure

How big do you want your table to be? How many rows and columns should it have? What about merging cells across columns or rows? All of these common tasks can be performed using the Table Property Inspector, the Document window, and the Modify > Table menu.

Setting (and Removing) Dimensions

You can set table and cell dimensions by typing numbers in the Property Inspector or by clicking and dragging table and cell edges in the Document window. Although the click-and-drag method is certainly more immediately gratifying and intuitive, it's very dangerous because it's so easy to lose track of which dimensions Dreamweaver is adding where. It's also frustrating because tables don't always resize the way you think they will when you're happily dragging edges around.

• Setting pixel- and percent-based dimensions In the Table Property Inspector, use the drop-down menu to choose a pixel- or percent-based dimension. A percent-based table width causes the table to resize based on the width of the browser window it's in, or (for tables that are nested inside other elements) the width of the page element containing the table. In the Property Inspector for cells, there's no drop-down menu, but you can still create cells with percent-based dimensions. Just type a % after the width or height number in the input field. Percent-based cell widths take up that percentage of the table's width. (So, if you're assigning percent-based widths to all columns in a table, make sure that your percents add up to 100%.)

• Converting between pixels and percents The Table Property Inspector also gives you a set of buttons for converting pixel-based dimensions to percent-based dimensions, and vice versa, for the entire table (and all of its cells).

• Removing dimensions For removing dimensions, the Table Property Inspector gives you the Clear Column Widths and Clear Row Heights buttonsvery handy if you end up with too many dimensions or the wrong dimensions in a table and want to start over. If you have the Table Widths bar showing, you can also click the triangle under any column and choose Clear Column Width.

Adding and Removing Rows and Columns

When you inserted the table, you specified how many rows and columns it should have. But plans change. Nothing is set in stone.

• Using the keyboard To add a row to the bottom of a table, place the insertion point in the last cell in the table (at the bottom right) and press Tab. There's a new row! This makes adding rows as you type contents quick and easy. (The added row has the same attributes as the row above it.)

• Using the Property Inspector To add or delete a row or column at the end of a table, you can select the table and change the number of rows or columns. If you replace a larger number with a smaller number, Dreamweaver deletes the bottom row or rightmost column (and its contents). If you make the number larger, Dreamweaver adds a row at the bottom or a column at the right.

• Using the Document window To delete a row or column, select it and press Delete. Any contents are deleted as well, of course.

• Using the Table Widths bar To insert a column, click the triangle under the column to the left or right of where you want to insert, and choose Insert Column Left or Insert Column Right.

• Using the menus The Modify > Table submenu (also available in the contextual menu if you right-click within a table) has a whole range of handy commands, including commands for adding and removing rows and columns.

  • Insert Row/Insert Column Inserts a row or column directly before (above or to the left of) the row or column containing the insertion point

  • Insert Rows or Columns A much more flexible command that presents you with a dialog box for inserting as many rows or columns as you like, before or after the insertion point

  • Delete Row/Delete Column Removes the row or column containing the insertion point

  • Using the Insert bar New to Dreamweaver MX 2004, the Layout Insert bar includes objects for inserting rows and columns into tables (see Figure 8.13).

    Figure 8.13. The Insert Row and Insert Column objects in the Insert bar.

Merging and Splitting Cells

You can also change a table's structure by merging and splitting cells. To merge two or more cells, select them and either choose Modify > Table > Merge Cells or click the Merge Cells button in the Property Inspector (see Figure 8.12). To split a cell into two or more cells, place the insertion point inside the cell and either choose Modify > Table > Split Cells or click the Split Cells button in the Property Inspector. A dialog box appears, asking how you want the cell split (see Figure 8.14). Choose your options and click OK to close the dialog box and split the cell.

What happens when you merge cells? Dreamweaver applies the rowspan or colspan attribute to one of the selected cells, and removes the other cells. Content from all selected cells is moved into the remaining cell. If it makes more sense to simplify the table's structure another way, howeverfor instance, if you've just merged cells across every row in a two-column table, creating, in essence, a one-column tableDreamweaver rewrites the table structure that way. It's possible to create some very sophisticated table structures with merged cells; if you let Dreamweaver take care of rowspan and colspan , nothing will go wrong with the code.

What happens when you split cells? When you split a cell into columns, Dreamweaver increases the number of columns in the table and adds a colspan attribute to all other cells in the current column. That's a pretty major structural change. The same thing happens when you split a cell into rows: The total number of rows in the table is increased, and row-span is added to other cells as needed.