How to Change a Table’s Appearance in Dreamweaver - dummies

How to Change a Table’s Appearance in Dreamweaver

By Janine Warner

Need to change the appearance of a table on your site? When you select a table in Dreamweaver, the Property inspector gives you access to the following options for customizing your table’s appearance:

  • Table: Provides a text area where you can enter a name for a table. This name, or ID, is useful for targeting the table in scripts.

  • Rows: Displays the number of rows in the table. You can alter the size of the table by changing the number. Be careful, though: If you enter a number that is smaller than the number of rows in your table, Dreamweaver deletes the bottom rows — contents and all.

  • Cols: Displays the number of columns in the table. You can alter the size of the table by changing the number. Again, if you enter a number less than the number of columns in your table, Dreamweaver deletes the columns on the right side of the table — contents and all.

  • W (width): Displays the width of the table. You can alter the width by changing the number. You can specify the width as a percentage or a value in pixels. Values expressed as a percentage increase or decrease the table’s size relative to the size of the user’s browser window or any enclosing container, such as another table or a <div> tag.

    Table dimensions expressed as a percentage enable you to create tables that change in size when the browser window is resized. If you want a table to always take up 75 percent of the window, regardless of the user’s display area, set the size as a percentage. If you want a table to always be the same size regardless of the browser window size, choose pixels for your table width.

    If a table is inserted in another container, such as a <div> tag or a table with a fixed width, the table is sized based not on the browser window but on the container.

    Note: Beginning in Dreamweaver CS4, you no longer find an H (height) field. As a best practice, most designers don’t specify table height because the table’s contents may change from one visitor to another. For example, the font size of text depends on a user’s system and settings.

  • CellPad: Specifies the space between the contents of a cell and its border.

  • CellSpace: Specifies the space between table cells.

  • Align: Controls the alignment of the table on the web page. The options are Default, Left, Center, and Right. As a general rule, the Default setting aligns the table from the left side of the browser window or other container.

  • Border: Controls the size of the border around the table. The larger the number, the thicker the border. If you want the border to be invisible, set it to 0.

  • Class: Provides easy access to style sheet options.

  • Clear and Convert: The icons in the lower-left area of the Property inspector (click the expander arrow in the lower-right corner to view them) provide these formatting options:

    • Clear Row Heights and Clear Column Widths enable you to remove all height and width values at one time.

    • Convert Table Widths to Pixels and Convert Table Widths to Percent enable you to automatically change Width settings from percentages to pixels. Pixels specify a fixed width; a percent setting means the browser automatically adjusts the specified percentage of the browser display area.

You can also apply formatting options and change the attributes of any element — such as text, an image, or a multimedia file — within a table cell. To do so, select the element and then use the options in the CSS or HTML Property inspector to make your desired changes, just as you would if the element weren’t in a table cell.