Formatting Basics: Tables for Page Layouts

Editing your table

Now you can begin to enter text, or insert images, into the individual cells of your table. Dreamweaver's table editing capabilities work very much like a spreadsheet. Using Standard View (you can toggle between Standard and Layout views using your Objects palette) for your table, you can use your arrow cursors on the keyboard to move from one table cell into the next -- left, right, up or down. You can also use the Tab key to jump into the next adjacent table cell. You can also copy, cut and paste within your table, as long as the number of cells you copied onto your clipboard is equal to the number of cells highlighted to receive the copied elements.

While you are working with a table, the inspector palette will change to indicate what editing and formatting options are available to you depending on what area of the table you are working on.

Let's now look at some of the options found in the table inspector:

• Table icon and Name: You are only required to name your table if plan to use scripting or style sheets.
• Rows and Columns: You can easily change the number of rows and columns in your table by simply changing the numbers here.
• Size: You can specify width and height dimensions of your table in either percentages or pixels.
• Pad and Space: Specify the cellpadding or cellspacing for your table in this area.
• Alignment: Defines the overall alignment of your table.
• Border: Specify whether you want a border (rules) between the individual cells of your table.
• Clearing and Conversion options: On the top row, use these buttons to clear your table of any previously-entered width or height specifications. On the bottom row, use these buttons to convert your table to pixel dimensions or percentage dimensions. NOTE: Please keep in mind that some browsers do not support table dimensions in percentages, so it is always a good idea to convert your tables to pixel dimensions after you are satisfied with their look and layout.
• Background options: Use these dialog areas to specify a background image, a background color, or a border color for your tables. Again, not all options are supported on all web browsers, so be sure to test your site or use the Check Target Browsers function in your site window.
• Border Colors: Table borders can use a light and dark border color specification to create a three-dimensional look. Be careful, however, as this feature is not supported in all web browsers.

Inserting text and images in your table is the easy part. Formatting your table can be a little tricky, however. But Dreamweaver makes table formatting much easier than other options. When you are working with your table in Dreamweaver, you can edit and format the table in very much the same way you would edit and format individual cells within a spreadsheet (such as Excel, or Lotus 1-2-3). You can click in a single cell, or click and drag across multiple cells, and you can apply formatting options across all the highlighted cells, rows or columns.

When working with table cells, your table inspector will sometimes change to accommodate additional formatting functions. One very useful function is the cell split and cell merge buttons.

The buttons in this section make cell splitting and cell merging a breeze. The left button merges any selected cells into one cell, while the right button breaks the selected cell into several units. A separate dialog box will appear when you split cells and will prompt you for more information, such as how many rows and columns you would like in the split cell.

You can also select non-adjacent cells by hold down the Control key in Windows (Command key in MacOS) and clicking on all the non-adjacent cells you wish to select. Note that cell merging and splitting only works with adjacent table cells.