Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS6 Essential Training

Exploring basic table styling


From:

Dreamweaver CS6 Essential Training

with James Williamson

Video: Exploring basic table styling

In the past few exercises we've added to and refined the structure of our table. Now we need to begin the process of styling the basic elements within the table itself. As you're creating your tables, it's a really good idea to pay close attention to it's overall structure so that you can use that structure to write more efficient styles. So I have the graphic-design. htm file open from 09_04 folder. And frankly, we are just sort of picking right back up where we left off. If I scroll down to my table, I can see that not really lots change there we have the caption inside of that and indeed if we go to Code view, and scroll down to the table, you can see that it is exactly the way that we left it before, perfect.
Expand all | Collapse all
  1. 1m 4s
    1. What is Dreamweaver?
      1m 4s
  2. 5m 44s
    1. Welcome
      1m 4s
    2. Using the exercise files
      2m 17s
    3. Learning web design
      2m 23s
  3. 1h 0m
    1. Looking at the Welcome screen
      5m 9s
    2. Exploring Windows and Mac interface differences
      5m 6s
    3. Arranging panels
      8m 44s
    4. Managing workspaces
      10m 14s
    5. Exploring the Application toolbar
      6m 21s
    6. Exploring the Document toolbar
      8m 47s
    7. Working with the Property inspector
      9m 30s
    8. Using the Insert panel
      6m 30s
  4. 53m 3s
    1. Understanding basic site structure
      3m 46s
    2. Exploring file naming conventions
      2m 10s
    3. Defining a new site
      5m 23s
    4. Managing files and folders
      7m 57s
    5. Adding remote servers
      7m 4s
    6. Uploading files
      12m 46s
    7. Previewing in browsers
      9m 11s
    8. Managing multiple sites
      4m 46s
  5. 36m 41s
    1. Creating new documents
      6m 49s
    2. Setting up new document preferences
      5m 30s
    3. Setting accessibility preferences
      6m 49s
    4. Working with starter pages
      4m 32s
    5. Managing starter pages
      13m 1s
  6. 37m 23s
    1. Getting text into Dreamweaver
      8m 43s
    2. Importing Word documents
      4m 6s
    3. Adding structure to text
      7m 35s
    4. Creating lists
      4m 35s
    5. Creating definition lists
      4m 0s
    6. Using the Quick Tag Editor
      8m 24s
  7. 44m 41s
    1. Exploring the Code toolbar
      5m 41s
    2. Setting code preferences
      7m 19s
    3. Using code hints
      8m 8s
    4. Wrapping tags
      5m 7s
    5. Adding comments
      6m 29s
    6. Using snippets
      7m 32s
    7. Formatting source code
      4m 25s
  8. 1h 19m
    1. Setting CSS preferences
      9m 32s
    2. An overview of the CSS Styles panel
      9m 23s
    3. Creating a new CSS rule
      6m 42s
    4. Using the CSS Rule Definition dialog
      7m 25s
    5. Organizing styles
      7m 22s
    6. Modifying style properties
      6m 17s
    7. Controlling CSS through the Property inspector
      6m 37s
    8. Attaching external style sheets
      5m 54s
    9. Using CSS visual aids
      7m 3s
    10. Using CSS Inspect
      6m 48s
    11. Using the Code Navigator
      6m 39s
  9. 1h 11m
    1. Managing assets in Dreamweaver
      7m 30s
    2. Setting external image editing preferences
      4m 26s
    3. Placing images on the page
      10m 12s
    4. Exploring Photoshop integration
      7m 17s
    5. Modifying Smart Objects
      9m 42s
    6. Modifying image properties
      8m 4s
    7. Styling images with CSS
      6m 45s
    8. Using background graphics
      7m 28s
    9. Positioning background graphics
      10m 10s
  10. 36m 23s
    1. Link basics
      3m 17s
    2. Setting site linking preferences
      2m 19s
    3. Creating links in Dreamweaver
      9m 17s
    4. Using absolute links
      3m 43s
    5. Using named anchors
      6m 41s
    6. Creating an email link
      5m 25s
    7. Creating CSS-based rollovers
      5m 41s
  11. 44m 30s
    1. Reviewing table structure
      5m 20s
    2. Importing tabular data
      6m 46s
    3. Creating accessible tables
      6m 11s
    4. Exploring basic table styling
      9m 42s
    5. Styling alternate rows
      8m 57s
    6. Creating custom table borders
      7m 34s
  12. 59m 15s
    1. Understanding how forms work
      2m 45s
    2. Reviewing form design
      3m 44s
    3. Creating accessible forms
      5m 16s
    4. Setting form properties
      2m 39s
    5. Using the fieldset and legend tags
      2m 52s
    6. Inserting text fields
      6m 56s
    7. Inserting list menu items
      7m 54s
    8. Inserting checkboxes
      4m 14s
    9. Inserting radio button groups
      3m 52s
    10. Inserting submit buttons
      2m 25s
    11. Exploring basic form styling
      8m 2s
    12. Exploring form element styling
      8m 36s
  13. 33m 25s
    1. Adding CSS3 transitions
      8m 29s
    2. Spry overview
      2m 44s
    3. Using Spry widgets
      3m 57s
    4. Adding Spry effects
      8m 1s
    5. Using the Widget Browser
      7m 4s
    6. Extending Dreamweaver
      3m 10s
  14. 1m 2s
    1. Additional resources
      1m 2s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Dreamweaver CS6 Essential Training
9h 24m Beginner May 07, 2012

Viewers: in countries Watching now:

Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.

Topics include:
  • Choosing and customizing a workspace
  • Defining a new site
  • Uploading files to your site
  • Creating new documents and web pages
  • Formatting source code
  • Working with CSS
  • Placing images and background graphics
  • Creating links
  • Styling a basic table
  • Creating a web form with buttons, check boxes, and list menus
  • Adding Spry effects
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Exploring basic table styling

In the past few exercises we've added to and refined the structure of our table. Now we need to begin the process of styling the basic elements within the table itself. As you're creating your tables, it's a really good idea to pay close attention to it's overall structure so that you can use that structure to write more efficient styles. So I have the graphic-design. htm file open from 09_04 folder. And frankly, we are just sort of picking right back up where we left off. If I scroll down to my table, I can see that not really lots change there we have the caption inside of that and indeed if we go to Code view, and scroll down to the table, you can see that it is exactly the way that we left it before, perfect.

So now we are ready to go ahead and start styling this. Now most of the time when you style things inside Dreamweaver you can take advantage of the Properties Inspector or the CSS Styles panel to help you write your styles in a visual manner. There are going to be sometimes however, where the visual styling aids simply don't have the capabilities that you need in order to do your styling. In some of the Table properties, that we are going to be styling over the next couple movies, for example, Border Collapse aren't available to you in the CSS Rule Definition dialog box. So in those cases you have one of two choices, one you can use the CSS Styles panel and just use the Properties pane to continue to add properties to it and modify your selectors or you can code by hand.

Now we spent some time in the title using the CSS Styles panel so what I want to do now is spend some time styling our table using actual code itself, so hand coding our styles. Now for some of you guys that are used to hand coding all of your files that won't be a big deal, but for some of you who are brand new to web design, I can probably since the groans already, oh hand coding, but I promise you it's going to be quick, it's going to be easy and simple and it's also going to allow us to not only gain some experience within the coding environment of Dreamweaver which is also very powerful, but to explain the syntax why we are creating the selectors the way that we are creating them and why we are assigning properties the way we are doing it as well.

So it's a nice chance to dive maybe a little bit deeper into the actual language of CSS itself. So what I am going to do is I am going to collapse my panels down to icons. I am going to switch to a Split Screen view, and I am going to enable Live View and over there in the Design pane, I am just going to scroll down a little bit so I can see how my table is going to render. This way as I'm styling over here on the left hand side and writing my styles, I can sort of update and see what's going on over here on the right hand side as well. So it's a really nice efficient way of working if you have the screen real estate to do this. So I am going to minimizing Properties Inspector too, I want to give myself as much room as I can for my code.

And then for the Source Code I am going to switch this from the source code of the HTML using the Related Files feature you up here, I can click right here on main.css and switch my Code pane so that I am looking at the CSS. Okay, I am going to scroll down through my Styles and as I continue to get down into the Article styles, I can see right down here at about line 465, I have my table styles. I have a little space for them, so I am going to start right there. So the first thing, that I am going to do is I am going to identify this as a table that can be found within the article tag.

So in terms of the structure of our page, I want to make sure that, I'm only targeting tables that are going to be placed within that article, because you never know you might use a table somewhere else and it may not need exactly the same styling, so I am going to be a little more specific here. I am going to type in Article space table. So these selectors these are called the sentence selectors and they read really from right to left. What you're telling the browser is find any table which is also inside an article tag and then target that.

Now after we type our selector, we are going to open up a curly brace so you can find those curly braces right beside the P key. And I actually like doing this I usually hit Enter twice and then close their curly brace. The reason for that is, sometimes it's really easy to forget to close is after you've been typing on your properties and that could cause problem. So I just sort of like to build that scale now at the very beginning. Okay, now inside the article table selector what I am going to do I am going to go ahead and assign the Width to 100%. Now that doesn't mean that it's going to the width of the entire page. What that means is it's going to be with a width of its container element which in this case is the article.

I am telling that table, go ahead and take as much width as you can within this article. The next thing I am going to do, is we are going to have several tables that are stacked on top of each other. So giving it a bottom margin so that those other tables are not budding right up again, it's probably a good idea, get a little bit of separation between them. So I am going to do margin-bottom and I am going to give that margin bottom of 1em and that em is representative of all of the size of text whatever the user has set to, if it's 16 pixels, you get 16 pixels there if there is a default size of 20 pixels you get 20 pixels there.

So it helps the layout to sort of relate to the body copy itself. Alright, the next thing I am going to do is go down just below the first selector that we wrote and I am going to target the table header cells. And I am going to do that that by typing an article space th. So again, every single time we target an element, I am going to make sure that I'm also an being specific in saying only when it's found within the article. Okay so inside that, I'm a type in a background because I want to give my table headers a different background color than the rest of my table, this sort of helps identify them as being important and also identify their role as headers.

So the color we are going to use here is RGB and then in parentheses, I am going to do 65, 62, 61. So it's a very dark but a neutral sort of gray color if you will. Now I am going to go down to next line and because we are using a really dark background, I need to change the foreground color too. So I am going to do color:white. Now you will notice that when I am typing in these properties and values that between them I have a colon. So after you type in the property, you type in a colon then you type the value and then typo in a semicolon.

So the colon separates the property and the values, semicolon tells the user agent stop parsing this line and go to the next one. Speaking of going to the next line, we are going to do just that. And I am going to type in some padding. So since we are not using any cell padding at all, we have to use CSS to control the spacing within the cell so that the text isn't touching the very edge of the cell, we can apply padding in any of the directions we want to create the amount of space between the actual text itself and the cell wall. So for the padding what we are going to do is .6em and then a space 1em and a space and then .3em and then a semicolon.

Now I'm sure if you've never seen padding shorthand notation that, that probably looks a little confusing, but whenever you're doing shorthand notation like this, here's how this works. Whenever you have three values that you are passing the first value applies to the top padding. The second value applies to the left and the right padding values and then the final value here applies to the bottom. One last thing that we are going to do here, it's actually standard for browsers and user agents to align the text in table header's center alignment, so they do a central align.

I don't want the center align headers so I am going to change the Text Align property to left. Alright, I am going to save this. And the next thing, I am going to do is I want to set a background color for my table rows. Now you could set the background color for the table itself, but there are few browsers out there that kind of have some rendering issues when it comes to borders sitting on top of a table's background color. So instead of applying the background color to the actual table itself, I am going to apply the background color to the rows. Now in terms of how these styles sit on top of each other and you can think of the table of being like at the very bottom layer and then the rows will be on top of that then the actual cells the th and td cells will sort be stacked on top of that.

So if I apply a background color to a table row and then apply a background color to an individual table cell, you'll see that table cells background color and it will sit on top of the table rows background color. Okay, so, I am going to type in article space tr and then I am just going to do the background property and the background color that I am going to give this is RGB 251, 174, 44 that's the orange color that we have been using and that is the only property I need for that.

Alright, let's keep going. I am going to get on the next line, and I am going to do article space caption. And what I want to do with the caption is, I want to hide it, I don't want people to see that caption at all. I do want machines to be able to read it, I want screen readers to be able to read it, but I don't want people to actually see it. So what I am going to do is I am going to set the Opacity of that to zero, that's going to make it transparent. I am also going to set the Margin to zero, meaning I don't want it to affect the spacing of the elements above and below it and finally, I am going to set the height of the property to zero.

So I'm really just getting rid of it entirely. I am shrinking it down so that it takes up no space, I don't want any margins above and below it and I want it to be totally transparent, so that there's no way that any of the user agents out there will actually render that. But machines will still be able to read the text. Alright so now, if I save the file and I click over in the Design view, I can sort of see my table updating, the caption goes away, I have got the background color applied to the table header cells and I've got the orange background color applied to the table row cells themselves.

Now there is still a little bit styling that we are going to need to do here, but we've reached a pretty good breakpoint. I see that we still need some interior spacing in all of our table cells, it would be a little easier to read this table. If we had some alternating row colors so we are going to be doing that. And even though he told the table to take up all the available space within the article I still would love to have a way to control the width of each individual column, so we are going to do that through Styles as well, we are going to pick that right back up in our next movie and finish our table's basic styling.

There are currently no FAQs about Dreamweaver CS6 Essential Training.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS6 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.