How to Work with Tables in Adobe Dreamweaver CS6 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

When you think of a table in Adobe Dreamweaver CS6, think of a grid that has multiple cells in it, much like a spreadsheet. Tables are used in HTML pages so that elements and data can be contained and positioned within specific cells in a series of rows and columns.

You can change the colors of cells in tables, divide or span the cells (combine them with other cells), and apply borders to them.

When you create a table, you can determine how many rows and columns it contains, as well as set fixed or scalable widths for rows and columns where necessary. You can also choose to merge rows and columns to create unique tables.


To create a table in Dreamweaver, follow these steps:

  1. Put the cursor where you want the table to appear, make sure that the Common tab on the Insert panel is visible, and then click the Table button.

    Alternatively, you can choose Insert→Table. Whichever method you use, the Table dialog box appears.


  2. Enter or select the attributes of the table you want to create:

    • Rows: In the Rows text box, enter the number of rows you want in the table. Rows stack vertically and can be added or deleted after you create the table.

    • Columns: In the Columns text box, enter the number of columns you want in the table. Columns are created horizontally across a table and can be added or deleted after you create them.

    • Table Width: Enter a width measurement in the Table Width text box and then select a measurement (Pixels or Percent) from the drop-down list to the right. Table width is an important attribute because it sets the default size for the table.

    • Border Thickness: Enter (in pixels) the thickness you want for the width of the border surrounding the cells and outside the table. If you want to see no table formatting, type 0 in the Border Thickness text box. Note: In Design view, you still see a dashed table border — it’s only a visual aid.

    • Cell Padding: Enter a number in the Cell Padding text box if you want to use padding to create a margin around all content inside the cell.

    • Cell Spacing: Enter a number in the Cell Spacing text box if you want to change the spacing to push cells apart.

    • Header: The Header check box converts the top row of the table from a standard row to a defined header (using the <th> tag). This reinforces that the first row and its contents define the header of the table.

    • Accessibility options: You can provide additional information to help visually impaired users understand the contents of your table. Add a caption that’s relevant to your table in the Caption text box. In the Summary area, include several lines of text to provide more information about the purpose of the table and its contents.

  3. Click OK.

    Your table is created.

When working with tables, try to take advantage of the Expanded table feature in Dreamweaver. (Find the Expanded button in the Layout section of the Insert panel.) Expanded view adds cell padding and spacing in a table and increases the size of the border to make selecting cells and content easier.

For an accurate preview, return to Standard view (click the Standard button in the Layout section of the Insert panel) after you finish editing.