Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Using Tables for Layout

All rightyou have a table on your page, and you're ready to go. Because tables form a grid, they make it easy to align objects to one another on your page. Many times, tables are used not only to align content horizontally, but also to create multiple vertical columns on a page, each holding its own content, just like a newspaper page.

Dreamweaver's Formatting Hierarchy

As you set formatting options for your tables, Dreamweaver uses a hierarchical approach to determine what formatting takes priority. For example, say you set a background color for a single cell in your table, as well as a background color for an entire row. The cell's formatting would override the row's formatting. Row formatting then overrides any table formatting. So the formatting priority goes like this: cells, then rows, then the table.

Keep this hierarchy in mind as you format your cells and content. If you encounter any formatting problems, odds are it's due to this formatting order.

Dreamweaver's Expanded Tables Mode

If your tables get too crowded to easily select and manipulate, use Dreamweaver's Expanded Tables Mode to temporarily add cell padding, cell spacing, and a border to the tables on your page.

Choose View > Table Mode > Expanded Table Mode. Dreamweaver displays the Getting Started in Expanded Tables Mode dialog box, which explains that this mode makes it easier to select and edit tables. Click OK to continue. Dreamweaver expands all the tables on your page, including nested tables, making it much easier to make selections and table edits.

With your tables expanded, you can more easily work with your table elements.

Once you make your selection or change, head back to Dreamweaver's Standard mode by choosing View > Table Mode > Standard Mode.

1.

Select your table by clicking one of its inner horizontal or vertical lines.

Before you click, as you hover your mouse over table components, Dreamweaver outlines the components in red so that you know what you're going to selectvery handy.

Noteworthy

Another way to select a table is to click anywhere inside it and then click <table> in the Tag Selector on the Status bar.

When your table is selected, Dreamweaver highlights it with a black frame (just as it does a selected graphic), and the table and column widths appear in green above or below the table. The green down-pointing arrows beside the widths are pull-down menus that provide additional column- and table-related commands.

To deselect the table, click anywhere outside the table.

2.

If you want to adjust the number of rows and columns in your table, type new values in the Rows and Cols fields in the Property Inspector.

Imminent Doom

If you reduce the number of rows or columns in your table using the Property Inspector, Dreamweaver won't warn you if the rows and columns that are being removed contain contentit will simply remove them.

3.

If you want to change the width of your table, adjust the value in the Property Inspector's Width field.

Dreamweaver resizes the table on your page, scaling the column widths in your table proportionately. When entering values for your table's width, you can use either a fixed pixel value or a percentage. If you want to set a percentage for the width, type a percent sign (%) after your value. Remember, if your width is a percentage, your table's size is then determined by the size of the visitor's browser window, which you have no control over.

Setting a percentage for your table width scales it in relation to Dreamweaver's window, which is often larger than most browser windows. This means that as you work, you won't have a good sense of how your table will actually appear for your visitors.

Alternatively, you can resize your table visually. Just drag the table's resize handles, which appear on the right, bottom, and bottom right of your table when it's selected (just as with graphics).

4.

To adjust the amount of cell padding and cell spacing in your table, use the Property Inspector's CellPad and CellSpace fields.

Noteworthy

Below the Width field in the Property Inspector, you'll see a field for controlling your table's height. Normally, you don't need to specify a table's height, so you can leave the Height field blank. A table's height is usually determined by the table content.

Remember that the cell padding is the spacing within a cell, and cell spacing is the spacing between cells in the table.

5.

To change your table's horizontal position on the page, choose an option from the Align menu.

The alignment options are Default, Left, Center, and Right. Choosing Default uses the visitor's web browser default setting, which normally is left alignment and doesn't allow text to flow around the table. Left positions the table on the left side of your page and allows text to wrap around the right side of the table, Center positions the table in the middle of the page with no text wrapping, and Right moves the table to the right side of the page and allows text to wrap on the left side of the table.

6.

If you want to set a background color and a border color for your table, use the color window that appears when you click the swatches beside Bg Color and Brdr Color.

Keep in mind that as you're building your overall web page, you can make structural changes to your tables at any time, whether they're filled with content or not.

7.

Rather than using a background color, you can set a graphic for the background of your table by using the Property Inspector's Bg Image option.

When you set a background graphic for your table, the image appears behind all the cells in your table. Be careful with background graphics, though. Text inserted in your table cell may be difficult to read.

Adding (and Removing) Rows and Columns

As you're working with tables in Dreamweaver, you may find that you have more content than you thought and that you need to add rows and columns to hold it all.

You can adjust the size of your table using the Property Inspector, but you may find Dreamweaver's other options for adding rows and columns (and deleting those that are no longer needed) even easier.

Here are some ways to add rows or columns to your table:

Choose Modify > Table > Insert Row or Insert Column to add a row above your current selection or a column to the left of your current selection.

Choose Modify > Table > Insert Rows or Columns. In the Insert Rows or Columns dialog box that appears, enter the number of rows or columns that you want to add.

Click the green down-pointing arrow beside the column's width and, from the pull-down menu that appears, choose Insert Column Left or Insert Column Right.

Click the last cell of your table and then press the Tab key. Dreamweaver automatically adds a row to your table.

To remove unwanted rows and columns from your tables, click inside a cell that's within the row or column that you want to delete. Choose Modify > Table and then choose Delete Row or Delete Column.

1.

In your table, select the cell or row that you want to manipulate by doing one of the following:

To select a single cell, hold down Ctrl (Windows) or Command (Mac) and click inside it.

A black border appears around the cell, indicating that it's selected.

If you're trying to select a row or column and you're finding it tricky to get your cursor to change to a selection arrow, try moving the cursor outside your table and then slowly bringing it toward the table's edge.

To select a row or column, position your cursor on the left or top edge of your table; then click.

Noteworthy

As you begin formatting tables in Dreamweaver, you may find it difficult to know what's selected, and therefore what's being affected. The Property Inspector will help you out here. After you make a selection, look in the bottom-left corner of the Property Inspector. Just to the right of the table icon and above the Split and Merge buttons, you'll see either Row or Cell. You can then proceed to add formatting knowing what's being affected.

Dreamweaver selects the entire row or column, indicated by the black frame that appears. Again, just before you click, Dreamweaver uses a red outline to indicate what you're about to select. If you want to select additional rows or columns, just drag into neighboring cells.

To select multiple cells, rows, or columns, drag within your table to select them.

After you select a row or column, you can remove it and all of its contents from your table by pressing the Delete key. If you press Delete while a single cell is selected, the cell won't be removed from the tableonly its contents are deleted.

2.

To resize your columns, use the Property Inspector's Width field.

Typing a value by itself fixes the width using pixels. If you want to resize the column width as a percentage of the overall table, type a percentage sign (%) after your value.

Noteworthy

If you want to change a column's width without affecting other columns in your table, hold down Shift as you drag a column's border. Other column widths in the table will remain as they are, and your table's overall width will expand or contract to accommodate the selected column's new size. Keep in mind that if you're building a fixed-width design, using this resizing method will likely trash your layout table.

You can also visually size your columns. Drag the edge of a column to increase or decrease its width. You'll find that when you change column widths, other columns in the table may be affected, so you may have to perform more resizing to get your table right.

Although you can increase row height using the same methods as you used to size your columns, normally row height is determined by the table contentsjust like table height.

3.

In the Property Inspector, set the horizontal and vertical alignment for the selected cells by choosing options from the Horz and Vert pull-down menus.

The Horz menu sets the horizontal alignment of cell contents. Its options are Default, Left, Center, and Right. Vert sets the cell's vertical alignment; options are Default, Top, Middle, Bottom, and Baseline.

Noteworthy

Think of the widths you set for the columns in your table as minimum widths. If you add wide content (like a large graphic or a long URL, or if No Wrap is used, for example), the column that holds the content will expand, accommodating the wider content. When this happens, the original column width that you set is overridden. Therefore, if you're creating a fixed-width layout, you'll want to be careful about the size of the content your table will hold.

If you leave these two settings blank, cell contents will align left horizontally and in the center of the cell vertically.

4.

If you don't want content (typically text) to wrap within the cell, turn on No Wrap.

Noteworthy

If you're using tables to lay out your pages, it's a good idea to set your table cell's vertical alignment to Top. With this setting, content will shift toward the top of your page, and you'll be able to control the space on your page more easily.

If you turn on No Wrap, the cell's contents will remain on a single line, preventing any line breaks, and the width of the column will increase to accommodate the contents.

5.

If you want the selected cells formatted as table headings, select Header in the Property Inspector.

Normally, table headers appear across the top of a table or in the leftmost column. By default, table headers are centered and bold.

6.

If you want to add a background graphic to a cell, click the Browse button beside the Bg field.

A graphic specified for a cell's background will override a graphic or colored background that's set for the whole table.

7.

If you want to set a solid-color background instead of a graphical one, choose a color using the Property Inspector's Bg color picker.

It's kinda confusing: the Property Inspector has two Bg fields. The one on top sets a background graphic, and the one on the bottom sets a background color. There are a few places where the Property Inspector's interface could be improved, and this is one of them.

8.

If you want to set a border color for your selected cells, use the Brdr color picker.

As you make your settings in the Property Inspector, your selected cells and rows take on the new formatting.

Resetting Column Widths

If you've turned your lovely table into a dog's breakfast, you may find it easier to just pack it in and start over again. But before deleting your entire table and starting from scratch, try clearing your table's column widths. Doing this will collapse your table and column widths to make them as narrow as they can be. If the table contains any content, the column widths will be reset to the size of the widest content in a column.

Once your table size has been reduced, you can begin resetting your column widths. This process may be tedious, but it can be a lot easier than rebuilding your entire table from the ground up.

Here's how to clear all column widths in a table:

1.

Drag in your table to select the cells that you want to merge.

You can merge cells horizontally or vertically in your table, as long as your cells are all in a continuous line.

2.

Choose Modify > Table > Merge Cells.

Alternatively, you can click the Merge Selected Cells Using Spans button in the Property Inspector.

The cells are merged into one larger cell that spans multiple rows or columns, depending on your original selection. If the cells contained any text or graphics, the content now appears in the merged cell.

1.

Click in the cell that you want to split.

2.

Choose Modify > Table > Split Cell.

Alternatively, you can click the Split Cells into Rows or Columns button in the Property Inspector.

You can split a cell into as many rows or columns as you like, but if you insert too many, you may find your table tricky to work with. Usually, I keep these settings at a minimum. If you do need a lot more cells, consider using nested tables, discussed later in this chapter.

3.

In the Split Cell dialog box that appears, set the way that you want the cell split by choosing Rows or Columns.

Selecting Rows splits the cell horizontally; selecting Columns splits the cell vertically.

4.

Set the number of rows or columns that you want to split the cell into.

5.

Click OK.

The cell splits into the number of rows or columns you specified.

1.

Select a single cell or group of cells to cut or copy.

2.

Do one of the following:

Choose Edit > Cut to remove the content from the table. If you have an entire row or column selected, then the row or column is completely removed from the table; otherwise, just the cell content is removed.

Choose Edit > Copy to leave the content in the table. This places a copy of the content on your system's clipboard.

3.

Place the cursor where you want to paste the content.

If you want to paste over existing cells, select them in your table. The selection that you make must match the structure of the cells being pasted. For example, if you cut or copied three cells in a column, you must make a similar selection before pasting.

If you're pasting an entire row or column, click in the cell where you want the row or column to appear. Pasted rows appear above the current cell, and pasted columns appear to the left.

4.

Choose Edit > Paste.

The pasted content is added to your table.

1.

Click in the cell where you want to insert a nested table.

2.

Choose Insert > Table.

Noteworthy

I find it easiest to set a nested table's width using a percentage, because my outer table's column widths are often set using a pixel value. If you set a nested table's width to a pixel value that's wider than the column that the table sits in, the column will scale to accommodate the extra size.

3.

In the Insert Table dialog box that appears, set the number of rows and columns, the width, and other table options just as you would for a regular table. Click OK when you're done.

Normally, you'll use just a few rows and columns in a nested table and keep its size to a minimumthere isn't much room inside a table cell.

When you click OK, Dreamweaver inserts the new table in the current table cell.

4.

To distinguish between your nested table and your parent table, hold down Ctrl (Windows) or Command (Mac) and move the cursor over the table's edge.

Dreamweaver highlights the nested table's rows and columns in red. Single-clicking selects your nested table.

To add content to your table, simply click inside a cell; then enter whatever content you like just as for any web page.

You format nested tables exactly the same as you format a regular table. Just select the table element that you're after and make your settings in the Property Inspector.