Build Your Own Business Website header image

Style Tables with CSS

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 HTML Table Structure

Tables are good for tabular data where you have columns and rows of information you’d like presented together. We show you how to add a table in NetBeans in an HTML file using their Insert Table feature. Then we go through the contents and the structure of a table we created previously explaining what each of the parts of the table are.

Video Transcript

Okay so let’s see, let’s move on to another question that I have and so far, nobody else has asked a question so I’m going to keep going with… Heidi asked a question about how to style tables using CSS. I laid out a table already to use for instruction so… here it is right here. So, for those of you interested in creating a table without typing all this stuff out, if we…I’m just going to delete this table here for a second and I’m going to close this palette.

Now if you go up over to windows and palette, in an HTML file, this HTML palette shows up and you can simply grab a table and drag it in to NetBeans here and decide how many rows. So let’s just make 3 rows of 3 columns and I’m going to have no border sides and we’re just going to say okay to that. And it automatically creates this for you and now you can start adding data to it. This is the one that I’m working on. It’s a little bit more complex than that. And let’s see, let’s just go to this and we’ll paste that right there. Update it in your page.

Okay so here we have this list of tabular data and this is the only reason why you want to use tables. You only want to use tables when you need tabular data. You don’t use tables for layout anymore or anything like that. Just when you have columns and rows of stuff you want together.

And so, we have 3 columns – weekday, date, and then the name of the manager. This has a header row, it has body rows and it has a footer row. So if we come back over and look at it in let’s see…come back and look at it here, starts off with a table tag, opening and closing table tag and then for the moment, let’s ignore the column group. In fact, I’m going to just delete the column groups. And then it has… the basic level is table head and table body. Table head is that heading row and then each row starts and ends with a table row or TR tag and each cell within a row…this starts and ends with a TH tag inside the header. So a TH is a table header tag and a TD is table data tag.

And so, you’ve got inside the body of the table called TBODY, you have 3 additional rows that are called… that start with a TR as well but their data is TD TDTD. And that allows you to say… to style your header different than styling your table body. And in fact, you can do exactly the same thing here with instead of table head, you paste that back down there and instead of head, now it’s foot. But the TH stays the same so it’s still a TH inside of that even if it is a table foot.

Now you need to ignore the fact that NetBeans is calling that an error because this is no longer and error and I’m guessing that in 7.0, this won’t show up as an error. In fact, let’s just play with that and see. We’ll copy this and we’ll go over to 7.0. Just go down to the bottom of this HTML page and let’s paste it in there. And you can see now it doesn’t… even though… I’m also missing the bottom table tag…slash table. There, so we’ve got our opening and closing table tag. Table… oh I see what I did and maybe that’s why I had the error because I just put it in the wrong spot. Table foot goes here inside of table. So now you’ve got table head, table body, table foot and in 6.9 maybe, if I had done that right, yeah… I’m not quite sure why it’s giving that error but it’s not an error so…

So Pam asks about when I’m going to work on the library site and well, I didn’t think it was going to take quite this long. I was going to go to the library site here when I was finished with this. If I don’t get this styling done then I guess I’m going to take it up tonight. But we’re definitely going to talk both about the custom sorting of teasers by… I’m going to spit this out. Custom sorting of teasers by their meta description or by their not meta description but by meta tag or post meta and also, the SQL statement. So that’s definitely on our horizon today and hopefully, I’ll get that done.

Somebody asks whether or not this should be TF and you know, maybe it should be. Yeah well, not in this version of HTML. You know, it might be that HTML 5 employs a TF tag and so, if we look at this here, it could be that that is a TF there but I’m not… I don’t know. Yeah, I think that’s probably a function of HTML 5 though but I might be wrong about that. The TH is also used in regular rows because you can have a TH cell whether it’s horizontally or vertically. So you can have them in a variety of different places and the way I learned it, TH was under the table foot but obviously, since it’s not throwing an error here, HTML 5 does use the TF tag.

Okay anyway, back to what we were going to talk about here.

0 Comments… add one
0 comments… add one

Leave a Comment