Join Bill Weinman for an in-depth discussion in this video introduction to XHTML tables, part of XHTML Essential Training.
So far in our course, we've really concentrated on vertical presentation, and at this point it's time to talk about tables, which allow us to do presentations that are not just verticle but tabular, or horizontal, or really, whatever it is that we want. We're going to cover the syntax of tables, and we're also going to cover how to apply CSS to tables to make them a little more attractive. Open your examples folder, and open the tables folder within that, and we'll start with table-simple.html.
Bring it into your editor, and while you're at it, go ahead and bring it up in a browser. That's a table, and as you see, it's got a title at the top, which is actually called a caption in XHTML, and it's got column headings, and then it's got the columns, and the data itself. Looking in the XHTML file, you have the Table tag, which is a container, and it contains the entire table, all the way down the bottom, there's the bottom of the table.
And within that table you have the Caption, which corresponds to this element here in the page. And then you have the headings, which are in a row, <TR> specifies a row, and that is that entire container, and then it has three cells with the <TH> element, specifying that they're heading cells, which basically just makes them formatted different. In this case they're bold and centered, which is pretty much the same thing that they do also in Mozilla, let's go ahead and bring this up in Mozilla as well, so you can see that.
More or less the same presentation there. There are some differences, but it's the same general idea. And then each row of the table is specified by <TR> container, and the <TD> elements within that. In the <TD> elements are the actual table cells. So here's the actual table cells, and they're all within a row. Sometimes it's easier to see the layout of a table if you set the Border attribute to one.
That creates a little border around the elements of the table so that you can see the layout of the table a little bit better. Some people will even leave it this way on their web pages. There's a few things about the default layout of the table that I don't like, and I've corrected that here in this HTML, one of them here, with a Valign="top", if I take that out, you can see what happens here, and I just took it out in this one row, that a natural vertical alignment of these table cells is centered, and since this one wraps, It leaves these centered, and it would do the same to these, and to this one.
I find that, I don't know, it just doesn't look right to me, and so I always almost as a matter of course when I write a table, I set Valign="top" in all my rows. And I sort of make that my personal default, and it works for me most of the time, sometimes I have to change it. But that's just a choice that somebody made at some point that just doesn't work for me, that's all, so take the border back off of the table and we can look again at the default layout of the table, and you know just off the top I see a lot of problems with it, it's hard to tell what associates with what, and these headings just look like they're out in the middle of nowhere, and the caption doesn't really look right, and we can do a lot of things in this XHTML to fix that, but, you know, it's almost not worth it, would take so much, when it's so easy to do it with style sheets. So let's just take a moment and look at a style sheet version of this table.
Go ahead and open that in Internet Explorer. This was one that I formatted with style sheets, and it didn't take a lot of work, and yet it looks nice, the data naturally associates with each other. I've got alternating white and gray. Got a little border around it, and I've got my caption formated, I've got my column headings formatted, and it all just looks a lot better. Take a look at the XHTML for this, it's almost exactly the same. I no longer have those Valign="top" on my table rows because I've got style sheets for them, and I've got alternating ones, have a Grey class, so alternating rows have that.
And if I had a program that was generating these, you know, it would be easy for the program just to know every other one to set that class equals the Grey class, and all the rest of it, you know I haven't even had to...Well I have set the class for the Artist, Title and Comment columns. There is a facility in XHTML to do that on a column wide basis, but it doesn't work in all browsers, unfortunately. That's the ColGroup tag, and so I just do it on each cell, and it's not that much work. I set the class.
That's these classes here that, you know, have a slightly different color or the italic for the title. Let's take a moment and look at the CSS for this. It's really very straight forward. The body sets the defaults for the entire page. I've got the Background as white, Font-family, Tahoma, which I like, but if you don't have that you'll get your default sans-serif. And the Font-size is 80% because, you know, with tabular data, you want to fit, you know, as much data as you can on the page, but you don't want to totally take over the client's browser. And if they don't like the 80%, they can easily hit the Ctrl-+, which works on most browsers to just make it a little bit bigger, look at that, it doesn't work on this one.
Text Size, see? You know, there's an easy way to do that, and most people know where those things are in their browsers. So, I like to get a little extra data in a table sometimes, and I'll set the default Font-size a little smaller, but I don't do that in an absolute way, because that totally takes over the client's browser. The table itself is formatted with a border around it, and that sets the border style, you have the Border-Width, Border-Style, is solid. Border-color is a light gray. And that has that little border around it, I just think it makes it look nice. You don't have to do that. And then I have this Grey style which sets a gray background. That's all that does, and that's for the alternating rows.
The headings are aligned left, and bold, you remember the original headings were centered, and they just don't line up right, the things look a little bit extra dumb to me. And so I have them aligned to the left, and I have the bold, and I have them in just a slightly off-white color. They're a little bit gray, you can see that. You know I might make them, you know, just a little bit grayer, and that makes them a little bit grayer. Then the actual data cells, you know, again I have that Font-size equals 80%, which actually makes that a little bit smaller, I might take that out and see what that does. Eh, it looks a little big on this browser, but I got the font set big because of recording, so I might just leave that like that. And then the Vertical-align equals top. That's my major peeve, and then a little bit of padding on the left, and a little bit of padding on the right, if I take that out, take a look at what happens.
It just gets all the way jammed over to the left there, and jammed over to the bottom on the decenders on the letters, and I just think that looks a little bit off to me, and so I go ahead, and I put in this padding, and that just sets a little bit of extra space, you know, below the decenders and to the left of the letters, and it just makes the data look a little bit more inside the actual table cells and I just like the way that looks, and so this is all just very flexible, and it's easy to do. Once we have all that said, I can set my gray backgrounds, and I can set, you know, just a little bit of extra style for the Artist, Title, and Comment columns, and you don't have to do that, but I've got a little bit of that violet color for the Artists, italic just seems right to me for titles and the comments are just a little bit bluish, and, I don't know, that might be a little too bluish, I can make it a little less bluish with 3s instead of 6s. You get to know the colors after a while with the hexadecimal. You've got the first two digits are red, the second two digits are green, and the last two digits are blue, and you just get you a feel for mixing them. I know there are a little off from the primary colors that you learned in school, those are reflective colors, these are projected colors, and so the color wheel is a bit different.
If you're interested, my wife wrote an interesting article about that she has on her website at LeeHarrington.com, that she talks about the two different color models for the projected color and reflective color because when we were in school we learned the color wheel, and that was really not the only color wheel, and we deal so much more with projected light today than we did at least when I was in school, because we didn't have computer monitors on our desks when I was in school. As a matter of fact, we only had black-and-white televisions at home, tell you how old I am. So, it's good to also learn this color wheel, and as you deal with these hexadecimal values, you'll get to know it. That's how you gussy up a table with the CSS style sheets, and how you can make tabular data look nice without just having to get all complex about it, I mean, this is pretty decently organized table, here, it doesn't have a lot of extra stuff around it to handle the formatting, that's all in the CSS, which is also nicely organized, and this I think shows you a lot about the power of both tables and CSS.
Now were going to cover one more subject on tables in our next lesson, and that'll be about using tables to align graphical elements on stuff in the page.