Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.