Tables

Quick reference

• 00:05 In this video, I wanna talk about tables.
• 00:07 Lots of stuff to learn about tables.
• 00:08 We use tables a lot in HTML.
• 00:11 So this is a table.
• 00:12 I created just a very basic table.
• 00:14 And if we look at our index page, this is the code to create this table.
• 00:19 And I'll put this in the resource section so you can copy and paste it or whatever.
• 00:22 But just a basic table without any sort of styling or whatever.
• 00:25 So to style this thing,
• 00:29 we can go table, th, and td.
• 00:33 Now this is a way you can work with multiple elements on one line.
• 00:39 It's just to save time.
• 00:40 We'll break these apart in a little bit.
• 00:42 But these are the basic table elements, table, table head, and table data.
• 00:46 And those correspond with our table, our table head, and our table data, right?
• 00:52 So, the first thing we can do is, let's give this thing a border and
• 00:56 let's call it one pixel and let's make it solid, and let's go black.
• 01:00 And you can see we're doing it all, we're using short hand here.
• 01:04 So now, boom, we get this whole thing.
• 01:06 So this is sort of a double border, right?
• 01:08 We can change that to a border-collapse and give it a collapse.
• 01:16 And if we do that, boom, it just goes down to a single line.
• 01:20 So you'll do that quite a lot.
• 01:21 Now you'll notice there's borders around every single thing and
• 01:25 you may just want it around the outside.
• 01:27 So to do that I would take these out and
• 01:31 create our own guy here.
• 01:35 And if we just copy this and paste it in here.
• 01:39 So now the border's only in the table one.
• 01:41 So if we save that, come back and hit reload, it does it like that.
• 01:44 So I'm gonna put it back the way it was.
• 01:49 For now, just cuz I kinda like that.
• 01:51 So what else can we do?
• 01:52 Well, we can use all of our other CSS stuff that we've learned so far,
• 01:55 like give this padding, for instance.
• 01:58 Go 20 pixels, it bops that back.
• 02:02 Now I've done that.
• 02:03 You can see for all of these again, just like the last one, we can break these
• 02:06 apart and create individual padding just for ths, just for tds, or just for tables.
• 02:11 But just to save time, I'm putting them all together.
• 02:12 So what else? Well,
• 02:13 you notice this one's sort of, these ones are kinda bopped over.
• 02:16 We can do our text-align.
• 02:20 And let's give this left.
• 02:24 it puts those over.
• 02:26 We can likewise, we can do maybe you wanna center everything.
• 02:30 Piece of cake.
• 02:32 So that's kind of cool.
• 02:33 I'm gonna change this back to left.
• 02:36 What else?
• 02:37 Well, we can use our hover just like we did with our links.
• 02:40 So we can go hover.
• 02:44 Actually we need to break this apart, so let's say we just wanna hover on the td.
• 02:48 So we can go td:hover.
• 02:54 And then give this a background-color of, let's say #cccccc.
• 03:03 Kinda like that one, and if we hit reload,
• 03:07 when we hover over these things, that changes, so that's kinda cool.
• 03:11 But we can also just do tr, table row, so
• 03:14 it hovers over the whole row, and that's very cool.
• 03:18 We can also make these by default, striped.
• 03:22 So we come back here.
• 03:24 Let's change this, tr:hover to tr and we want to go nth.
• 03:30 That's nth-child and let's say even.
• 03:35 So, this will do for even number rows, it'll change the background color.
• 03:40 So, we save that and come back, boom, so we have this automatic.
• 03:44 It's kinda cool, so we can change the even, odd, save that.
• 03:50 And it does that.
• 03:52 So that's pretty cool.
• 03:53 You'll see this a lot in tables.
• 03:55 It's a good way to sorta break things apart visually.
• 03:58 So it's easier to understand at a glance to pick these rows apart.
• 04:02 So that's very popular to do.
• 04:03 So what else we could do, we can change this table head color, for instance.
• 04:07 So, let's change this back to even and now if we come back here to table head,
• 04:19 We can give this a background-color of,
• 04:23 I don't know, let's just, something.
• 04:27 Save this, hit reload.
• 04:27 Well now, we have a different color here.
• 04:30 So all kinds of things you can do with table.
• 04:32 Remember, you can do most of this things that we've learned with CSS already for
• 04:37 each element here for the table head, for each row and for each table data thing.
• 04:42 And that's all for this video.

Lesson notes are only available for subscribers.