In this tutorial, you will learn how to use Adobe Dreamweaver to add an accessible data table to a web page.

To create a table in Dreamweaver:

  1. With your Dreamweaver document open, choose Insert, Table.

    Table option in Dreamweaver Insert menu.

  2. Enter the desired number of columns and rows into the appropriate text fields in the Table window, and make sure the Table width is set to percent.

    Options in Insert Table window.This will make it possible for the table width to change depending on the size of the browser window. The other options under table size will determine the appearance of the table:

    • Border thickness: will determine the size of the border around the table as well as between the table cells.
    • Cell padding: will add space between the text in each cell and the cell’s border.
    • Cell spacing: will add space between the table cells.
  3. Under Header, choose whether you want to add headers to the columns, rows, or both.Header options in Insert Table window: None, Left, Top and Both.When you add a header, Dreamweaver will automatically add a Scope attribute to that header.  Screen readers can use the Scope attribute to let the user know whether a header refers to a column or a row.
  4. Use the Caption text box to enter the text for a label that will appear above the table.The Summary attribute is used to provide the user with some information about the structure of the table (such as the number of rows and columns) and a summary of the information that will be presented in the table.Accessibility options of the Insert Table window: Caption and Summary.
  5. When you’re finished entering the table information, choose OK to add the table to your Dreamweaver document.
  6. To save the changes to your document, choose File, Save. You can preview the table by choosing File, Preview in Browser.
Bookmark and Share