Dreamweaver

Create a Spry table

There are two types of Spry tables: a simple table and a dynamic master table that binds a detail region to it in order to allow dynamic updating of data on a Dreamweaver page.

If you are creating a simple table, you can set one or more columns as sortable and define CSS styles for various table elements.

The process for creating a dynamic master table is the same as the process for creating a simple table; with a master table, however, you can bind a detail dynamic region to the table so that when a user clicks on a row in the master table, data in the detail region is dynamically updated.

To build a dynamic master Spry table, first you insert a master table, which displays the data used to trigger the dynamic changes, and then you insert a detail region, which contains the data that undergoes change.

  1. Select Insert > Spry > Spry Table.
    You can also click the Spry Table button in the Spry category in the Insert bar.
  2. Choose your Spry data set from the menu.
    Note: If you try to insert a table but you haven’t created a region, Dreamweaver prompts you to add one before inserting the table. All Spry data objects must be contained within regions.
  3. In the Columns panel, adjust the columns for your table by doing the following:

    • Click the plus (+) or minus (-) signs to add or subtract columns.

    • Click the up or down arrows to move a column. Moving a column up moves it further left in the displayed table; moving a column down moves it to the right.

  4. To define a column to sort on, select it in the Columns panel and choose Sort Column When Header Is Clicked. Repeat this for each column you want to sort on.
  5. If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in your HTML page, you can choose a CSS class for one or more of the following options:
    Odd Row Class
    Changes the appearance of the odd-numbered rows.

    Even Row Class
    Changes the appearance of the even-numbered rows.

    Hover Class
    Changes the appearance of a row when you move the mouse over it.

    Select Class
    Changes the appearance of a row when you click on it.

  6. If you are creating a simple Spry Table, deselect the default option, Update Detail Region When Row Is Clicked. Keep the option selected if you are creating a dynamic master Spry table.
    Note: If you are inserting a dynamic master table, you can see in Code view that Dreamweaver has inserted HTML table tags and a spry:repeat tag with an onClick operation for the current row. This is how Spry determines where the user clicked and which data to update dynamically.
  7. Click OK to see the table appear in Design view with a row of headers and a row of data references, enclosed in curly brackets ({}), for each of the included elements. In Code view, HTML table tags are inserted into your file, along with code that identifies the sortable name and category columns.