facebook twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: Tables

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

HTML Tables are quite cumbersome to hand code, but Dreamweaver makes it easy to add and modify them. In this lesson, you will learn how.

Lesson Goals

  • Learn to create and modify tables.
  • Learn to merge cells horizontally and vertically.
  • Learn to sort tables.
  • Learn to import data into tables from spreadsheets.

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 Drop-down
  • Select Table from the Common Insert panel: File Insert Table

You will then be presented with the Table dialog box:Table Dialog Box

In the Table dialog box, 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 screen readers to describe the table.

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

  1. Open ClassFiles/dreamweaver-cc/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 box as shown below:Table Dialog Box
  5. Click OK. Your page should look like this:Design ViewIn 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: Our Employees Table
  7. Now fill out the table as shown below. You can use Tab, Shift+Tab, and the arrow keys to navigate between cells.Live Button
  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:Properites Panel

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

Sorting Tables

Dreamweaver allows you to sort tables as long as they do not have merged cells. To sort a table:

  1. Place the cursor anywhere within the table to be sorted.
  2. Select Edit > Table > Sort Table:
  3. The following dialog box will pop up: Sort Table Dialog Box
    1. Select the first column you want to sort by, the sort method (Alphabetically or Numerically), and the sort direction (Ascending or Descending).
    2. If you want a secondary sort, fill out the Then by fields as well.
    3. Check the appropriate Options.
    4. Click OK.

Table Sorting

Duration: 5 to 10 minutes.

In this exercise, you will practice sorting a table.

  1. Open or go to ClassFiles/dreamweaver-cc/Exercises/table.html in Dreamweaver.
  2. Sort the table by Name.
  3. Now sort the table by Phone to get it back to the way it was.

Modifying Tables

After inserting the table, it is likely that you will want to make changes. Dreamweaver makes it easy to do so.

Inserting Rows

There are several methods of inserting rows into a table.

Method 1: Right-click

  1. Right-click in any cell in the row below which you want to insert a new row.
  2. Select Table > Insert Row:Select Table Insert Row

Method 2: Edit Menu

  1. Place the cursor in any cell in any row in the table.
  2. From the Edit menu, select Table > Insert Row:

Method 3: Keyboard Shortcut

  1. Place the cursor in any cell in the row above which you want to insert a new row.
  2. Press CTRL+M.

Method 4: Tab

To insert a row at the very bottom of the table:

  1. Place the cursor in the last cell of the bottom row.
  2. Press Tab.

Inserting Columns

There are several methods of inserting columns into a table.

Method 1: Right-click

  1. Right-click in any cell in the column after which you want to insert a new column.
  2. Select Table > Insert Column:Select Table Insert Column

Method 2: Edit Menu

  1. Place the cursor in any cell in any column in the table.
  2. From the Edit menu, select Table > Insert Column:

Method 3: The Column Header Menus

  1. Click on the Table Column menu above any column.
  2. Select Insert Column Left or Insert Column Right:Select Insert Column Left

Method 4: Keyboard Shortcut

  1. Place the cursor in any cell in the column before which you want to insert a new column.
  2. Press CTRL+SHIFT+A.

Inserting Multiple Rows or Columns at One Time

  1. Right-click in any cell in the table before or after which you want to insert columns or rows.
  2. Select Table > Insert Rows or Columns...:Select Table Insert Rows or Columns
  3. Fill out the Insert Rows or Columns dialog box and click OK:Select Table Insert Rows or Columns Dialog Box

Merging Cells

There are several methods of merging cells in Dreamweaver. Each method begins by selecting the cells you would like to merge by clicking on one cell and dragging the mouse over additional cells: Email Address List

Method 1: Right-click

  1. After selecting the cells to merge, right-click and select Table > Merge Cells: Select Merge Cell
  2. Note that the content of the merged cells also merges, so in this case, we would delete the repetitive content: Repetitive Content

Method 2: Properties Inspector

  1. Make sure that the Properties Inspector is expanded. The arrow in the bottom right of the Properties Inspector should be pointing up (Upward Arrow Icon). If is pointing down, click it.
  2. After selecting the cells to merge, click the Merge Cells icon in the Properties Inspector:Properties Panel

Method 3: Keyboard Shortcut

  1. After selecting the cells to merge, press CTRL+ALT+M.

Splitting Cells

There are several methods of splitting a cell in Dreamweaver. Note that the last step for each method is to fill out the Split Cell dialog box and click OK.Split Cell Dialog Box

Method 1: Right-click

  1. Place the cursor in the cell to split, right-click, and select Table > Split Cell...: Select Split Cell

Method 2: Properties Inspector

  1. Make sure that the Properties Inspector is expanded. The arrow in the bottom right of the Properties Inspector should be pointing up (Select Split Cell). If is pointing down, click it.
  2. Place the cursor in the cell to split, click the Split Cells icon in the Properties Inspector:Properties Panel Split Cells

Method 3: Keyboard Shortcut

  1. Place the cursor in the cell to split and press CTRL+ALT+S.

Converting a List to a Table

Duration: 15 to 25 minutes.

In this exercise, you will change the list on Resources.html to a table that looks like this: Converting List Results in Browser

  1. Open ClassFiles/dreamweaver-cc/Exercises/Resources.html in Dreamweaver.
  2. Modify the page so that it appears as shown in the screen shot above. Note that the first cell under the Date heading is merged across two rows.
  3. Save your work and open your new page in a browser to test it.

Importing Data into Tables

Dreamweaver makes it possible to import data from external files saved as CSVs (comma-separated values). Such data most often comes from spreadsheets.

To illustrate:

  1. Open ClassFiles/dreamweaver-cc/Exercises/sales-report.html in Dreamweaver.
  2. Place the cursor in the empty paragraph after the "Sales Report" heading.
  3. Select File > Import >Tabular Data: Select Tabulat Data
  4. Fill in the Import Tabular Data dialog box as shown below: Import Tabular Data Dialog box
    • Data file: Browse to the Sales_Report.csv file, which is in the same directory as the sales-report.html file you are working on.
    • Delimiter: Leave as Comma.
    • Table width: Fit to data.
    • Cell padding: 2
    • Cell spacing: 2
    • Format top row: [No Formatting]
    • Border: 1
  5. Select the top row of the table by hovering over its left-most border until the cursor changes to a solid right arrow and then clicking: Top Row Selected
  6. Click the Header check box in the Properties Inspector: Properties Panel
  7. Your table should look like this: Sales Report in Browser

Dreamweaver and Styling Tables

Dreamweaver makes it easy to format tables. Using the Properties (shown below), you can:

  1. Set background colors for the table rows and cells.
  2. Set the width and height of columns and rows.
  3. Change the horizontal and vertical alignment of cells.

Alignment Choices

However, behind the scenes, Dreamweaver uses deprecated attributes to do all these things, which is really too bad. Browsers still support the deprecated attributes, so you can use the Properties Inspector to format tables in this way, but your HTML5 pages will not be valid. We will show you how to format tables with CSS later in the course.