Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the structure of an HTML or XHTML document
- Creating and using templates
- Controlling white space and line breaks
- Making effective use of tables and frames
- Flowing text around an image
- Formatting tables with CSS
- Creating web pages that work properly across platforms and devices
- Reviewing a case study of a complete web site
Skill Level Beginner
In our last lesson, we looked at how tables work in XHTML and HTML. In this lesson we're going to look at how you can format your tables using CSS. CSS stands for Cascading Style Sheets and that's the technology that's used on the web for formatting web pages and making them to look prettier than the default might be if you didn't have any styling at all. Of course, a lot of which you do with CSS, you can do with attributes in XHTML and HTML. Most people recommend that you use CSS. I'm going to tell you why CSS is better.
In a nutshell, using CSS, you can name your styles and you can then apply those styles to a number of different places within your document. Then if you need to change them, you can simply change it in one place and that changes all across the document. It's a lot easier to manage your styles and it's a lot easier to apply them in an organized fashion. We'll see some examples of that in this lesson. So let's get into it. Here is the table, here in this table- css.html document and this is our editor here on the top and this is the browser here on the bottom.
So you can see it's the same table from our last lesson, which looked like this except that it's got some style applied to it. So it's a bit more attractive and in my opinion it's a bit easier to read as well. So here is the XHTML file and this is the CSS file over here in this tab and we'll be looking at this in a little bit of detail as we get into the lesson. For now, let's look at the XHTML. You see there is the table and the table ends down here at the bottom. It looks very much like the table we did in our last lesson with a few significant differences.
We have these class attributes here for applying the styles and we'll see how that works in just a moment. So, here's the table and over here in the CSS, you'll notice that we have some style applied to the body and we have some style applied to the table, we have some style applied to the caption. This is an example of Cascading Style Sheets, CSS. What the cascading means in CSS is the styles apply on top of styles. So, for example, we have some style applied to the body, the background is white, you see the FFF means white, the font is set to Tahoma or Sans-serif if Tahoma is not available on your system.
So we see that the font throughout the document is this Tahoma font and the font size is set too, because Tahoma tends to be a little bit big, so I made it a little bit smaller. These are just my choices, of course, you can make your own choices and your own style sheet, but I like them like that. So that's applied to entire document. Even to these elements within the document, it's still applied. So the table itself has a border. It has a border style. It has a border color. The background of the table is this white, because that's the style that was applied to the background of the entire document.
If I change this from white and make it-- well, I don't know. Say FCC, which is sort of a reddish color, save that and reload. We see that applies to the entire document and it applies to the background of the table there. Now there are certain table cells where I've set the color to be grey and to be white. Of course, those get their own styles, but this is an example of the cascading, because the entire document has this color. That's also applied to the elements within the document, like for instance in this table.
I'll change that back. We'll see some more examples of this as we go on. It should be really clear by the time we're done. Save that and reload. Now, if we look over here at the caption, we see it says My Favorite Albums, and it has the caption tag. If we look in CSS, we'll see that we have a caption selector here on this style and that applies to all the caption tags that it will find in the document, which happens to be 1. It applies this bold style. The font is the Tahoma font because that was set up in the body.
If I were to change that to something else like, oh, I don't know, Comic Sans MS, save and reload. Then we see the entire document changes to Comic Sans MS including even the caption where we have caption set to bold. It's picking up that font from the body. This is the cascading in Cascading Style Sheets. Put this back to Tahoma and save and reload and that changes it everywhere in the document.
Now, let's take a look at the table row and the table heading. Now, we'll notice in the Cascading Style Sheets, table row does not have a style attached to it. Table heading has this align equals left, font-weight, bold and color equals 666, which is a medium grey, and we'll see here that the table heading in this row here, it's got the bold.
It's got the left-align. You will remember in our last document, we'll take a look at that, that the table headings were centered. I like them a lot better on the left. I think they read better on the left, they align better with the data on the left, so they look more like the headings on these tables. So it has these styles applied, of course, on top of the styles are applied to the body of the document. We have this row here which has the table row class equals grey and then it's got the data cells with their own classes: artist, title and comment. This is another example of cascading.
You'll see over here we have tr.grey, tr.white and td.artist and td.title. These are selectors with classes, so tr. grey means a TR tag with a grey class. We'll look over here. We have a TR tag with a grey class. So wherever the document sees tr class = grey and there is another instance of it here two rows down, then that class will be applied from here.
tr.grey has a background color set to this light grey. So all the cells within that row, we have TD, TD, TD, will all get that grey background. You'll see here they are grey, grey, grey. So that gets applied to these cells. Even though these cells have their own class, this one is artist, this one is title, this one is comment, these data classes get applied on top of the row class because these elements are within the TR container.
So the TR is wrapped around these data cells and so this class gets applied first because it's in the outer box and these classes get applied on top of that because they're inner boxes. So it looks like this on the page. You have the grey all the way across and then you have this Artist class, which has got this maroon color, this Title class, which is italic, and this Comment class. You see here the Comment class has a blue color to it. So these classes here, td.artist, td. title, td.comment, they get applied after the row classes.
It doesn't matter where they are in the document here. I could move these, let's drag them up here and now they're above, save that and reload here. It doesn't change. They are still applied in the same order; you've got the grey and you've got the other. That's because it's not what order they are in, in the file. It's how they appear in the document. It's what container contains something else. So I'm going to put this back just because I like it that way. Let's save it and reload and we'll see that this is still how we expect it to be.
So the Artist class, the Title class, the Comment class, these apply to the fonts. We have a color, we have italic, we have another color and these get applied on top of the row classes. So in a nutshell, that's how it works. It's really easy to do by using the classes in this way, like for instance if I wanted to change this grey and make it maybe a lighter grey, I'll just type an EEE instead and save it. It applies in all of these different places throughout the document. You see now we have this very light grey.
Hopefully, you can see it on your screen. I can barely see it on mine. That it applies all throughout the document. I only need to change it in one place, or make it maybe a little bit bluish, save that and reload. We have a slightly bluish grey. So change this in one place and it applies throughout the document and that really is the power of Cascading Style Sheets right there. So this is how you can format a table to make it attractive using CSS. You see here's what our table looks like before, very plain. That's the defaults for the HTML. That's how it was originally envisioned, so that they could put tabular data in a document.
This is what you can do using CSS to make it more readable and more attractive.