facebook google plus twitter
Webucator's Free Adobe Dreamweaver CS6/CC Tutorial

Lesson: Tables

Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver CS6 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

  • Create and modify tables.
  • Merge cells horizontally and vertically.
  • Sort tables.
  • 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 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.

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 Commands > Sort Table:
  3. The following dialog will pop up:
    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/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.

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

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:

Method 2: Insert Menu

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

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:

Method 2: Insert Menu

  1. Place the cursor in any cell in any column in the table.
  2. From the Insert menu, select Table Objects > Insert Column to The Left or Insert Column to The Right:

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:

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...:
  3. Fill out the Insert Rows or Columns dialog and click OK:

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:

Method 1: Right-click

  1. After selecting the cells to merge, right-click and select Table > Merge Cells:
  2. Note that the content of the merged cells also merges, so in this case, we would delete the 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 (). If is pointing down, click it.
  2. After selecting the cells to merge, click the Merge Cells icon in the Properties Inspector:

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 and click OK.

Method 1: Right-click

  1. Place the cursor in the cell to split, right-click and select Table > 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 (). If is pointing down, click it.
  2. Place the cursor in the cell to split, click the Split Cells icon in the Properties Inspector:

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:

  1. Open ClassFiles/Dreamweaver/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 Added heading is merged across two rows.
  3. Save your work and open your new page in a browser to test it.

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Importing Data into Tables

Dreamweaver makes it possible to import data from external files saved as CSVs (Comman-separated values). Such data most often comes from spreadsheets. To illustrate in Dreamweaver CS6:

  1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver.
  2. Place the cursor in the empty paragraph after the "Sales Report" heading.
  3. Select Insert > Table Objects > Import Tabular Data...:
  4. Fill in the Import Tabular Data dialog as shown below:
    • 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 leftmost border until the cursor changes to a solid right arrow and then clicking:
  6. Click the Header check box in the Properties Inspector:
  7. Your table should look like this:

To illustrate in Dreamweaver CC:

  1. Open ClassFiles/Dreamweaver/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:
  4. Fill in the Import Tabular Data dialog as shown below:
    • 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 leftmost border until the cursor changes to a solid right arrow and then clicking:
  6. Click the Header check box in the Properties Inspector:
  7. Your table should look like this:

Dreamweaver and Styling Tables

Dreamweaver makes it easy to format tables. Using the Properties Inspector (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.

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.