Adding a Table to Your Page

Contact Us or call 1-877-932-8228
Adding a Table to Your Page

Adding a Table to Your Page

To add a table to your page, place the cursor where you want the table to appear and do one of the following:

  • Select Insert > Table:
  • Select Table from the Common Insert panel:

You will then be presented with the Table dialog:

In the Table dialog, you enter:

  • Rows and Columns. The number of rows and columns you want for your initial table. Rows and columns can be added to and removed from the table later.
  • Table width: The width of the table in pixels or percent. Percent applies to the containing area. For example, if you nest a table with a width set at 50% within a table cell of another table, the nested table will take up 50% of the cell.
  • Border thickness: The border width in pixels. The border will be applied to all cells of the table in a grid format. Enter "0" if you don't want a border.
  • Cell padding: The amount of space in pixels that will separate the cell content from the cell border.
  • Cell spacing: The amount of space in pixels that will separate each cell from each other cell.
  • Header: Whether you want a header row, header column, or both.
  • Caption: The caption you want to appear above the table. This is unformatted by default, but can be formatted with CSS.
  • Summary: The text used by screenreaders to describe the table.

To illustrate, let's add a table to a page:

  1. Open ClassFiles/Dreamweaver/Exercises/table.html in Dreamweaver.
  2. Place the cursor in the empty paragraph after the "Employees" heading.
  3. Select Insert > Table.
  4. Fill out the Table dialog as shown below:
  5. Click OK. Your page should look like this:In Design View, when the table is selected, Dreamweaver provides table menus (the green lines, arrows, and text above the table) to help you understand and modify the table. These will not appear on the page when viewed in the browser.
  6. Click the Live button to see what the page will look like in the browser:
  7. Now fill out the table as shown below. You can use Tab, Shift+Tab, and the arrow keys to navigate between cells.
  8. Save the page and leave it open.

Notice that the data in the first row is bold and centered. That's because it is a heading row. You can change any cell to or from a heading row in the Properties Inspector by checking or unchecking the Header field:

Note that new to CS6 the header row check box is no longer checked by default.

Do NOT use this for formatting purposes. Only actual headers should be marked as headers.