How to create a shadow for a table in dreamweaver

Written by adrian grahams Google
  • Share
  • Tweet
  • Share
  • Email

Webmasters use tables on Web pages to align and display text and page design elements, including graphics and images. If you want to make a table stand out on a Web page, place a shadow effect around the table. Create a shadow for a table in the Adobe Dreamweaver website design application with the program's CSS (Cascading Style Sheets) box shadow function.

Skill level:
Moderately Easy


  1. 1

    Launch Adobe Dreamweaver and open the Web page containing the table on which you want to add the shadow.

  2. 2

    Click "Design" in the display menu bar to view the Web page in the same way as it appears online.

  3. 3

    Click and highlight the table that you want to edit.

  4. 4

    Click "CSS Styles" in the right-hand menu. Select "Box-Shadow" from the drop-down list under "Border Category" in the CSS Styles pane.

  5. 5

    Click the "+" icon. Type your preferred numerical values for the shadow's X-Offset, Y-Offset and Spread Radius into the relevant input boxes. Each value changes the screen pixel size and position of the shadow effect around the table. Experiment until you get the correct effect for the shadow by looking at the table on the page as you change the values. Set the colour for the shadow effect by clicking the colour button and selecting your preferred colour from the colour palette.

  6. 6

    Click "File" in the main menu, then select "Save" to save your changes.

Tips and warnings

  • If you apply a shadow to more than one table, keep the shadow effects the same shape and size to maintain a consistent design across the website.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.