Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
In this chapter we're going to talk about styling tables. Now, you might think yourself, wait a minute, tables, I thought this was what we're getting away from and we're not actually talking about tables for layout, we're talking about actual table tables, like the post archive calendar, which here, for this particular chapter we've moved it up above tea of the day to make it a little easier see. Now, when do things to it. There's nothing wrong with tables, the tables are not evil, tables were never evil, tables were just really egregiously abused and made to do things that they were never intended to do and one of the problems with tables I had is that it was really bloated and inefficient and made pages huge and difficult to deal with.
On the other hand, there is information that is tabular in nature. If you had a financial summary that would be a table or a monthly calendar as far as I'm concerned is a table. You have columns representing the days of the week and you have rows representing weeks of the month. That's to me is a table. It's possible to create a monthly calendar without using any table markup, but for me and I've just never really seen why you would do that even if I've created examples showing ii. Pretty much I've created examples and say, hey, this is how you would do a monthly calendar without a table and this is also why you shouldn't. So, what we have here, over in the post archive box is a table and actually everything below the post archive heading, the July 2006, the Sunday Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, all the numbers, those are all enclosed in a table.
Now, what we're going to do is take a quick look and actually we're going to zip down here, and you can see here, there's a table, and it has a caption, there's a caption element, and then there's a table head, the t head element with some table headers and a t body element, table body with a bunch of rows and a bunch of table cells, and each of those table cells actually has a class indicating which day of the week it is, we'll see why that is in our later videos in this chapter. What we're going to do here, the first we're going to do is make this a little bit smaller, just very simply.
I'm going to make the whole thing smaller, which will shrink it down. OK. Now, that's ok and you can do that, and it might also be nice to pull a little bit of a margin on here to push it away from the post archive header and also to center it. We talked about this in the videos on margins, in the previous chapter, and we're going to recap it here just a little bit. A 1em top margin and automatic, auto left gray margins, which will center it inside the box.
Now we have this caption. Actually this is where something interesting comes in. You notice that space opened up between the table and the caption and that's actually something of a point of contention. The caption is within the table, so it really should be inside of the tables margin, but that's not what happened here, so, what we may want to do instead is change this so that the table doesn't have any actual margin, but the caption element does have a top margin and that will push it down to where we're looking for it to be.
We might also want to say, instead of just margin-top, margin 1em auto and then no bottom margin, and that will pop and line out the way that we wanted. This is the case where using, you know, the same auto margins for the captions and the table and putting in margin on the caption instead of the table. Whether or not that's the way it should be down, is as I say a matter of at least some debate, but for cross browser consistency is surely the best way to go.
There is one thing that probably we should do here though, the month. Let's make that a little bigger and bolder so that it's a little more obvious. We already said that we wanted the font size of the table to be smaller. So we can make the font size of the caption be larger which, in any sane browser implementation would take the font size of the caption back up to where it was before we made the whole table smaller. Basically go down one font size and that we'll be smaller and then go back up one level with larger, get back to where we were before and then we can, you know, with the font-weight make it bold faced and now, July 2006, stands out a little bit more. We can fiddle with the padding and the margins and the caption for its placement but this is pretty good the way it is.
It's a nice way to have something that's associated with the table, that captions it without having to add like another heading or something like that, in order to say July 2006. So that's a very basic styling of tables in terms of font sizing and margins. In the next video, we're going to get into styling more directly and some of the elements within the table.
There are currently no FAQs about CSS Web Site Design.
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.