Check out a free preview of the full CSS In-Depth, v2 course:
The "Styling a Table" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle live codes styling a table and invites you to try it out on your own.

Get Unlimited Access Now

Transcript from the "Styling a Table" Lesson

[00:00:02]
>> Estelle Weyl: So let's talk a little bit about columns. So we had that element called col and what can you do with it? Turns out not much, but you can style a little bit. So here we have column group and I have four columns for my, I have the week, the name of the player.

[00:00:26] The name of the club that she belongs to and the stat for the week that she was the best player.
>> Estelle Weyl: So we can add styles here and feel free to play along. I can write background-color | pink. And then, stat background color, pale goldenrod. Cuz if you're gonna make something ugly, the make it really ugly.

[00:00:58] There's actually not much styling that you can do with col. Like here, if I say font-size,
>> Estelle Weyl: 2ems, nothing happened. There's very limited styling. And what you'll note is if you actually do tr background.
>> Estelle Weyl: It just actually, hit Enter first. Right, tr background-color slate gray. Look at that.

[00:01:42] Because the tr is actually the td's, which are being colored are inside a tr and they're inheriting that color. So, you can put a background color on a column, which is a nice quick way to do it, but if you actually overwrite a tr and that's actually kinda nice because what you can do is just highlight one of them.

[00:02:02] So tr nth-of-type 3. If you just want to highlight one, like when you're hovering over it or something like that. Or, tr hover, that's a nice effect. So you can color the whole column and then overwrite it that way. So it's not fully useless. It's a little bit useless, but not totally.

[00:02:36] So here, I have this little link. To say try it out and let's take a five minute break while we actually open up this table and style it with your new things. Actually let me say a few things before we take a break actually. Which is, this is a really ugly table.

[00:03:02] And there's ways of making tables look much better, mostly through spacing and removing stuff. So what I might wanna do is say thead ( border-bottom| 1px solid}.
>> Estelle Weyl: That doesn't work. Tr th, why didn't that work? Okay, so I underlined it this way. I'm going to put on all my td.

[00:03:42]
>> Estelle Weyl: And th's, I'm gonna put padding just to the right. So I'm gonna do 0 0 0 10px). And it gave it more space, but I actually think I want top and bottom as well. So I'm gonna do top 5px, 5px and do you see that the table already looks better, right?

[00:04:14] Then I'm gonna do col, what is the important column here? Not the week, because who cares about the week, right? I think the name of the player is the important part, so let's make that background color and I hope you're playing along too.
>> Estelle Weyl: Efefef, so I'm highlighting that, and then I'm going to say, first of all, it's already looking much better.

[00:04:41] That is no longer a hideous table. But I'm gonna put it, around the whole thing, I wanna put a border of one pixel, solid. And that's actually starting to look like a good table, but I think that my caption is too close. Remember, I am not a designer.

[00:05:00] Padding 5 pixels. Let me do padding 5px 0 10px. That looks good. Right, we're already getting it to something where you could put it on a website and not be ashamed of yourself. Font-weight,
>> Estelle Weyl: Bold and then let's actually make the t, the tables across the column, across the top or the header.

[00:05:34] Let's do that, give that a background color.
>> Estelle Weyl: And let's do #dedede. I don't like the fact that we have white between club and week stat line. That doesn't look good. So what, anyone remind me what property will get rid of that spacing?
>> Speaker 2: Border colapse?
>> Estelle Weyl: Exactly.

[00:06:10] And that it's put on the table.
>> Estelle Weyl: And there it looks much better except for, I like more spacing than we have now. So I'm gonna add to the padding.
>> Estelle Weyl: I'm gonna do 10px, 5px, 10px and 15px, okay. And I wanna stripe it, how would I stripe the table?

[00:06:48]
>> Speaker 3: T r the even or the even something.
>> Estelle Weyl: T r even, but what's the actual thing between what holds the even?
>> Speaker 3: F of type.
>> Estelle Weyl: F of type, very good. So Tr, so I'm going to do only the tr tbody. Right? T body, t-r, nth of type.

[00:07:20] Even and what I'm going to do is give it color, rgba or let me do this.
>> Estelle Weyl: Black. And how can I make it not black?
>> Estelle Weyl: 10, there.
>> Estelle Weyl: So an interesting thing to note is that I styled the tr and when it hits the column, right, it's not overriding the column.

[00:08:10] It's putting background color on the Tr and the background color of the column is coming through. See that?
>> Estelle Weyl: And now let's do Tr on hover, background color light blue. I don't know if light blue is actually a color. It is! There we go. Why is jade not change in color.

[00:08:56]
>> Estelle Weyl: What did we do?
>> Speaker 2: [INAUDIBLE] We targeted it somehow.
>> Speaker 3: If we put t body before Tr hover, would that be more specific? Yeah. Good job.