How to Use the Open Browser Window Behavior in Dreamweaver
How to Create Styles with Class and ID Selectors in Dreamweaver
How to Define Styles with the Tag Selector in Dreamweaver

How to Create a Table in Dreamweaver

You can insert a table by clicking the Table icon in Dreamweaver’s Layout Insert panel or by using the Insert menu, as shown in the step-by step instructions that follow. Don’t worry about perfecting the settings; you change all of these options later (with the exception of the accessibility settings, which can be edited only in Code view after you’ve created a table).

To create a table in Dreamweaver:

  1. Choose Insert→Table, or click the Table icon in the Common or Layout Insert panel.

    The Table dialog box appears.

    image0.jpg
  2. In the Rows and Columns fields, specify the number of rows and columns, respectively, you want in your table.

  3. In the Table Width field, enter the width of the table and then select Percent or Pixels from the drop-down list.

    If you choose Pixels, the table will be created in a fixed size. If you choose Percent, the table will expand or contract in size based on the size of the browser window. For example, if you create a table and set the size to 80 percent, the table will fill 80 percent of the browser window space.

  4. In the Border Thickness field, specify the thickness of the border of your table in pixels.

    You can enter a 0 in this field to create a table with no visible border.

  5. In the Cell Padding and Cell Spacing fields, enter the number of pixels of cell padding and cell spacing, respectively, for your table.

    The padding and spacing fields can be left blank to create a table with no extra padding or spacing. Alternatively, you can create a CSS style that specifies spacing.

  6. Choose a Header option by clicking the icon that represents the header position you want in your table.

  7. (Optional) In the Accessibility fields, add a caption and a summary.

    These fields provide extra information that can be useful to the hearing impaired and other people who are surfing the web using screen readers or other web browsers that read web pages aloud.

  8. Click OK.

    The table is added to the page in Dreamweaver and the Table dialog box closes.

  9. To add text to a table, click to place your cursor in any table cell and then type the data you want in that cell. Repeat for each cell.

    Alternatively, you can use Edit→Paste Special to insert columnar data from another program, such as Excel.

  10. To insert an image into a cell, click to place your cursor in any table cell and then choose Insert→Image→Image. Repeat for each cell.

    Alternatively, you can use Image icon in the Common Insert panel.

  11. Apply formatting options, such as bold or italic, to selected cells and their contents by choosing the option from the Property inspector.

You can edit all table options, except the Accessibility options, in the Property inspector after you create a table. When you select a table or cell by clicking it in Dreamweaver’s workspace, the attributes appear in the Property inspector at the bottom of the work area.

Click the border of any table to select the entire table, and the Property inspector displays the table options. To view all options, click the expander arrow in the lower-right corner of the Property inspector.

[Credit: Photo by Janine Warner]
Credit: Photo by Janine Warner

Sometimes selecting the entire table and not just an individual cell is tricky. If you're having trouble selecting the table, simply place your cursor anywhere in the table and choose Modify→Table→Select Table.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Swaps with Multiple Images in Dreamweaver
How to Change a Table’s Appearance in Dreamweaver
How to Link to Audio and Video Files in Dreamweaver
How to Align Table Content in Columns and Rows in Dreamweaver
How to Add Fluid Elements to a Layout in Dreamweaver
Advertisement

Inside Dummies.com