Tables are made up of three basic elements: rows, columns, and cells. If you've ever worked with a spreadsheet program, you're probably familiar with tables. Tables in HTML are quite similar when it comes to working with tabular data. In most cases, you'll want to create a row of headings along the side or top of a table and then columns and rows that can be populated with text, images, and other data.

The code behind an HTML table is a complex series of <tr>, <th>, and <td> tags that indicate table rows, table header, and table data cells, respectively. Figuring out how to type those tags so that they create a series of little boxes on a Web page was never an intuitive process. If you wanted to merge or split cells to create rows or columns with varying numbers of cells, you faced a truly complex challenge.

Thank the cybergods that you have Dreamweaver to make this process easy. With Dreamweaver, you can easily

You can create tables in Standard or Expanded mode in Dreamweaver:

Figure 7-1. When you choose Expanded mode, Dreamweaver adds space around table cells, making it easier to select and edit the content within a table.

Figure 7-2. In Standard mode, Dreamweaver's table display is more consistent with how the layout will look in a Web browser, such as Firefox or Internet Explorer.

Although Expanded mode is useful for selecting and editing the contents of a table, Standard mode is best for creating tables. The following tips can help you create a table, and the sections that follow explain how to further refine it:

Specifying cell options

In addition to changing overall table settings, you can specify options for individual cells within a table. When you select a cell, which you can do by clicking to place the cursor anywhere inside the cell area, the Property inspector changes to display the individual properties for that cell (see Figure 7-5), such as the formatting and alignment of the contents of a particular cell.

Note

In Dreamweaver CS4, the Property inspector features both HTML and CSS settings. CSS settings are generally preferred and work the same for the contents of a table cell as they do for content anywhere else on a Web page. (See Chapters 5 and 6 for more on using CSS.)

Figure 7-5. The Property inspector displays cell properties when <td> or <th> tags are selected.

You can also change multiple cells at the same time. For example, suppose that you want to have some (but not all) cells in your table take on a certain color background and style of text. You can apply the same properties to multiple cells by selecting more than one cell at a time before choosing the settings in the Property inspector. To select adjacent cells, press the Shift key while clicking to select cells. To select multiple cells that aren't adjacent, press the Ctrl key (the

Tip

If you're having trouble selecting an individual cell because it contains an image, click the image and then use either the ← or → key on your keyboard to move the cursor and deselect the image, which activates the Property inspector and displays the options for that cell.

When one or more cells are selected (they have to be adjacent for this to work), the top half of the Property inspector controls the formatting of text and URLs within the table cells. The lower half of the Property inspector provides these table cell attribute options (refer to Figure 7-5):

• Merge Cells icon: Merges two or more cells. To merge cells, you must first select two or more cells by clicking and dragging or by pressing either the Shift or Ctrl key while selecting multiple cells.

• Split Cell icon: Splits one cell into two. When you select this option, a dialog box lets you specify whether you want to split the row (you split the cell horizontally) or the column (you split the cell vertically). You can then specify the number of columns or rows, which controls how many times the cell divides. Note that you can apply the Split Cell option to only one cell at a time.

• Horz: Controls the horizontal alignment of the cell contents.

• Vert: Controls the vertical alignment of the cell contents.

• W: Controls the width of the cell.

• H: Controls the height of the cell.

• No Wrap: Prevents word wrapping within the cell. The cell widens to accommodate all text while you type or paste it into a cell. (Normally, the excess text just moves down to the next line and increases the height of the cell.)

• Header: Formats a cell's contents by using a header tag, which displays the text in bold and centered by default in most Web browsers.

• Bg (color): Click in the color well to select a background color from the color palette or enter a hexadecimal color code into the text field. If you use the color palette, the hexadecimal code is entered automatically into the Bg color field.

Formatting multiple columns in a table

When you're working with lots of cells in a table, you may want to format multiple cells in the same way. Dreamweaver makes that task easy, whether you want to align numbers, make the headings bold, or change the color scheme. Before you start planning how to line up all your numbers perfectly, be aware that you don't have as much control in HTML as you have in a program, such as Excel, where you can align numbers to the decimal point. You can, however, align the content of columns to the left, right, or center. Thus, if you use the same number of digits after the decimal point in all your numbers, you can get them to line up. For example, if one price is $12.99 and another is $14, express the latter as $14.00; then, when you right align, the numbers line up properly. (If your columns still aren't lining up the way you want them to, consider using a monospace font, such as Courier, which lines up better.)

The steps in this section explain how to create a table in Standard mode and align all the data cells to the right so that the numbers or other content align consistently. You can use these exercises also to align the contents of table cells to the left or center and to apply other formatting options, such as bold or italic. In these steps, I insert the data into the table after I create the table in Dreamweaver.

Tip

If you want to import data from a table you've created in a program, such as Word or Excel, see the section, "Importing Table Data from Other Programs," later in this chapter. If you're working with a table that already has data in it and just want to format or align the cells, go directly to Step 7.

If you're starting from scratch, create a new, blank HTML page and follow these steps from the beginning:

1. Make sure that you're in Standard mode. (Choose View

   
   Table Mode
   
   Standard Mode.)

2. Click to place the cursor where you want to create a table.

   Tip

   In both Standard and Expanded modes, tables are created automatically in the top-left area of the page, unless you insert them after other content.

3. Click the Table icon on the Common or Layout Insert panel.

   Alternatively, you can choose Insert

   

4. In the appropriate boxes, type the number of columns and rows you want to include in your table.

   Remember you can always add or remove cells later with the Property inspector.

5. Specify the width, border, cell padding, and cell spacing.

6. Choose the header option that best corresponds to the layout you want for your table to create a row of header cells across the top, side, or both.

7. Add a caption and summary in the Accessibility section and click OK.

   The table automatically appears on the page.

8. Click to place the cursor in a cell and then type the data you want in that cell. Repeat for each cell.

   Alternatively, you can use Edit

   

9. Select the column or row for which you want to change the alignment.

   Place the cursor in the first cell in the column or row you want to align; then, click and drag your mouse to highlight the other columns or rows that you want to change.

10. Choose an alignment option from the Horz (horizontal) or Vert (vertical) drop-down lists in the Property inspector, as shown in Figure 7-6.

    The content of the cell adjusts to match the selected alignment option.

    Alternatively, you can access many formatting options, including alignment options, by selecting a table and then right-clicking (Windows) or Control-clicking (Mac).

    You can also apply other formatting options, such as bold or italic, to selected cells and their contents by choosing the option from the from the Property inspector.

Figure 7-6. The Property inspector displaying the Table options.

Tip

If you want to format one cell in a column or row differently from the others, click to place the cursor in just that cell and then click one of the formatting options in the Property inspector. You can also choose to align multiple cells that aren't contiguous (they don't touch each other) by pressing and holding the Ctrl key (

Note

You can also use CSS to format the cells within a table. To do so, select the cell or cells, click the CSS button in the Property inspector, and use the CSS options to create and apply styles while you format the table. You find instructions for creating styles, which can be applied to tables as well as any other elements in a Web page, in Chapters 5 and 6.

Vertical alignment solves common problem

If you're having trouble getting the contents of adjacent cells to line up with each other, setting vertical alignment to Top may solve your problem. A common frustration when you're building tables is that you have two or more rows side by side with text in one and images in the other, and you want the top of the image and the top of the text to line up. Often they don't line up because they're different lengths, and the table is trying to adjust the contents to best use the space within their respective cells. The solution is simple: Select all the cells you want to align, and in the Property inspector, change vertical alignment to Top. Seemingly like magic, all the content jumps right to the top of the cells and lines up perfectly. This is such a common problem that I routinely set the vertical alignment of table cells to Top.

Merging and splitting table cells

Sometimes, the easiest way to modify the number of cells in a table is to merge cells (combine two or more cells into one) or split cells (split one cell into two or more rows or columns). With this technique, you can vary the space in table sections and customize their structures. For example, you may want a long cell space across the top of your table for a banner and then multiple cells below it so that you can control the spacing between columns of text or images. The following two sets of steps show you how to merge and split cells in a table.

To merge cells, create a new HTML page or open an existing HTML file and follow these steps (see Chapter 2 for more information on creating files):

1. Choose Insert

   
   Table and create a table with 4 rows and 4 columns, a 75 percent width, and a border of 1.

2. Choose the header option that best corresponds to the layout you want for your table to create a row of header cells across the top, side, or both.

3. Add a caption and summary in Accessibility section.

4. Click OK.

   The table appears on the page.

5. Highlight two or more adjacent cells by clicking and dragging the mouse from the first cell to the last.

   You can merge only cells that are adjacent to one another and in the same row or column.

6. 

   The cells are merged into a single cell by using the Colspan or Rowspan attributes. These HTML attributes make a single cell merge with adjacent cells by spanning extra rows or columns in the table.

Figure 7-7. The Property inspector includes small icons that merge and split cells.

To split a cell, create a new table or open a page with an existing table and follow these steps:

1. Click to place the cursor inside any cell you want to split.

2. 

   The Split Cell dialog box appears.

3. Select Rows or Columns in the dialog box, depending on how you want to divide the cell.

   You can split a cell into however many new rows or columns you want.

4. Type the number of rows or columns you want to create.

   The selected cell is split into the number of rows or columns you entered.

When you're working with lots of columnar data, you want to be able to sort that data just as you do in a spreadsheet program, such as Excel. In Dreamweaver, you can sort data even after it's formatted in HTML (something you couldn't easily do before). You still don't have as many options as you do in Excel. For example, you can sort an entire table based on a specified row, but you can't sort different rows individually.

To use the Sort Table Data feature, create a new, blank HTML page, add a table with several rows and columns, and add some content. (I explain how in the preceding section.) You may also open an existing page with a table of columnar data. Then, follow these steps:

Manually converting financial data or other spreadsheet information can be tedious. Fortunately, Dreamweaver includes a special feature that enables you to insert table data created in other applications, such as Word or Excel. To use this feature, the table data must be saved from the other program in a delimited format — the columns of data are separated by tabs, commas, colons, semicolons, or another type of delimiter. Most spreadsheet and database applications, as well as Microsoft Word, enable you to save data in a delimited format; files with a CSV (Comma Separated Values) file extension are one example. Consult the documentation for the application you're using to find out how. After the data is saved in a delimited format, you can import it into Dreamweaver.

To import table data into Dreamweaver after it's been saved in a delimited format (such as CSV) or in its native application (such as Access or Excel), create a new, blank HTML page or open an existing file and follow these steps to import the data:

Dreamweaver also enables you to export data from a table into a delimited format. This capability is useful if you want to export data from a Web page so that you can import it into another program, such as Word or Excel, or into a database program, such as FileMaker or Access. To export data from Dreamweaver, place the cursor anywhere in the table and choose File

Tables have long been used on the Web to create page layouts that require more than basic alignment of elements on a page. In the early days of Web design, using tables was one of the only ways you could get around many of the limitations of basic HTML and accomplish some otherwise impossible design feats, such as evenly spacing bullets, creating columns side-by-side on a page, and spanning headlines or images across multiple columns.

Today, CSS offers a much better option for these kinds of designs, but many people are still using tables and you may have Web sites that you created in this way (or you may inherit a design that uses them). If you're working on a site that's designed with tables to create a page layout for any content that isn't tabular, such as the Chocolate Game Rules page, as shown in Figure 7-10, consider redesigning the page layout with <div> tags and CSS, which are covered in detail in Chapter 6.

Figure 7-10. Many two-column page layouts, such as the one shown here, were created with HTML tables.

Placing tables within tables, or nested tables, can help you create extremely complex designs. For example, with a table that contains all the scores of all the baseball games in a season, you could add a smaller table inside one cell to include detailed stats of an exceptional game. You create nested tables by inserting a table within a cell of another table.

To place a table inside another table, follow these steps: