How to Create a New Document from CSS Starter Pages in Dreamweaver CS6
How to Create Rollovers in Adobe Dreamweaver CS6
Dreamweaver's Clean Up HTML Tools

How to Apply Table Formatting with CSS in Adobe Dreamweaver CS6

In addition to using the Property inspector in Adobe Dreamweaver CS6, you can format entire tables or individual table cells (and contents) by using CSS (cascading style sheets). In most cases, this is considered a better practice, as it maintains a separation between markup, content, and the actual styling used to make it aesthetically pleasing.

You can use CSS to format a table as follows:

  1. Create a CSS Class rule from either the Property inspector or the CSS Styles panel.

  2. Under the Type category, select a size and color for your table’s text.

  3. Under the Background category in the CSS Rule Definition dialog box, assign a background color to your table by using the Background color property and then click OK.

  4. Select the table you want to apply the new Class style to.

  5. Assign the class by using the Class drop-down list in the Property inspector.

    Your entire table takes on the new formatting.

    image0.jpg

Similar to the way you can use the Property inspector to color and align individual cells, you can create and apply CSS rules to table cells. In most cases, this is considered a better practice than relying on HTML attributes. To do this, just follow these steps:

  1. Create a CSS Class rule from either the Property inspector or the CSS Styles panel.

  2. Under the Background category, select a Background color.

  3. Under the Block category, select Middle from the Vertical-Align drop-down list, select Center from the Text-Align drop-down list, and then click OK.

  4. Select the table cell that you’d like to apply the new class to.

  5. From the Property inspector, locate the Class drop-down list and select your new class.

    Your formatting choices are applied to the table cell.

    image1.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Absolute-Positioned (AP) Divs in Adobe Dreamweaver CS6
How to Set Page Properties in Dreamweaver
Dreamweaver CS6 Welcome Screen and Default Settings
How to Publish Your Adobe Dreamweaver CS6 Website
How to Run Site Reports on Your Adobe Dreamweaver CS6 Website
Advertisement

Inside Dummies.com