Style table borders and basic styling - HTML Tutorial

- [Instructor] Finally, we have gotten to the chapter where we start to make it pretty. And I know a lot of you have been waiting for this with bated breath. So we are going to take the table that we have been working on in the previous chapter and now we are going to apply some styling in order to make it pretty. All of the usual rules about CSS apply here so you can apply any of the existing CSS properties to table cells, table rows, table data, table headers and so forth as appropriate. You'll find a use in interesting CSS selectors in this chapter, and I'll explain those selectors, but if you're interested in learning more about selectors, you should probably take a look at my CSS selectors course, which is available here in the library. All right, so the very first thing that I'm going to do here is I'm going to get rid of my fabulous red, blue, and yellow colors that I put in in the last chapter to demonstrate some of the features here in this table. We just don't need them, bye bye. Then, the next thing to do, once you usually start working with a table like this, is it's always helpful to put borders on things so you can understand where the edges of some of your table cells and the table itself are located. So, let's just go ahead and start by doing that. So we'll start by just putting in a table selector and let's just put in a border that's one pixel solid red. And that's going to put a big red line all the way around our table. Then, let's go ahead and put in a TD, and we'll put in a border here of one pixel solid blue. And that is going to outline some of the cells, but not all of them, why is that? Well remember not all of our cells are TD's, some of the cells are TH's. In order to make this work for all of the cells, we'll need to say TD, comma, TH, and now all of the cells in the table are selected. So that's a lovely look, it's very patriotic, but some of you are probably bothered by the sort of 90's ish sort of look that we have goin' on here if you remember those beveled tables from back in the day. And, that's because by this little bit of space that we have here in between these cells. One of the things that people really want to know how to do is get rid of that space. It's actually very simple, here on the table selector, all we need to add is border hyphen collapse, the property, and the value of collapse. And that will get rid of all of that unsightly space. It also looks like it got rid of our table border, but what's happening here is that table border of red comes first, the TD's and TH's come second, and so those, the borders that are there on those cells are covering up that outside border on the table. This is a totally fine look if that's what you're going for, you might be looking for something a little bit prettier so I'm going to start modifying some of my colors here and some of my other properties. So down here on this TD and TH, I'm going to start by putting on a little bit of padding. And half a rim, which would translate to about eight pixels, that'll just go ahead and give me a little bit of padding on the four sides and immediately, it's just easier to read this thing. The other thing that you might want to think about doing is do you need a border on all four sides of all of your cells? And so, one of the nicer things to do here is to add a bottom border. See how much easier that is to read? You don't need all of those vertical lines. And, let's change the color blue to something a little bit more in line with the brand of Wisdom Pet Medicine, which would be CCAE51, which is a lovely shade of tan. And then for the table itself, we could change its color to 3F 2B 21, and that'll be a nice dark brown. Now that looks great, although you might be bothered by the very last line here in the table. Remember as I said before, because the TD TH style comes later in the style sheet, it's border appears to be on top of the border that's associated with the table. So one of the thing you might want to do is get rid of that line there, but only for that very last row on the table. How might you go about selecting that? Well, fortunately we have some great selectors for that, so what I'm going to do is I'm going to say in the tfoot, in that row in the tfoot, and the last child, in other words, the very last row, and all of the cells that are in there, I want to border bottom of none. See how nicely that just turns off that line on the bottom and now it looks a little bit more symmetrical. So these lovely borders are a great way to start adding a little bit of interest to your table, you can make them all different colors, you don't have to put them on all four sides, and you can apply them to different elements, different boxes inside of your table to give it a very clean and polished look.