Advanced Tables

Quick reference

• 00:05 In this video, I wanna talk about a couple of advanced table things.
• 00:09 So, what happens if you want rows to span other columns?
• 00:13 So, let's say we want a row that goes all along the top.
• 00:16 How would we do that?
• 00:17 Say we wanna put a header or something on there.
• 00:20 We would create a new table row and
• 00:23 give it a table head and let's call it My Hiking Log.
• 00:29 And let's give this thing some color so that we can sort of look at it and
• 00:32 see what's going on.
• 00:34 Give it a B background color of grey.
• 00:39 Now let's use a color code, ccc.
• 00:42 So if we save this and hit reload we see, we have this thing and
• 00:46 it's only spanning one column.
• 00:48 So to change this, we need to change the column span, we want it to
• 00:53 span more columns and we just come back here and give this a colspan equals 4.
• 01:00 Now if we save this, now first why do we want four?
• 01:04 Well, this is one column, two three, four,
• 01:07 we wanted to stretch all the way across there so we give a colspan of four.
• 01:10 And now if we hit reload, boom,
• 01:12 it stretches all the way across our entire table.
• 01:14 So that's kinda cool.
• 01:15 That's the colspan feature and
• 01:17 you can use that in a th, you can use in a td, anywhere you want.
• 01:21 So what if you want, so this is a colspan,
• 01:23 what if you want something to span many rows?
• 01:26 You would use the rowspan tag.
• 01:28 So, let's say you wanna add another column and
• 01:31 we want it to span all three of these names.
• 01:33 Well, come up to our table header.
• 01:35 First we want a new header and let's call this category.
• 01:42 Now come down here and we wanna add a new table heading, and
• 01:45 let's give this a row span equals to 3.
• 01:48 And let's give it a background color also of ccc.
• 01:58 Just so we can see that it actually spans.
• 02:02 And let's call this Hikers.
• 02:04 So if we save this and hit reload, so now we see this new thing right here, and
• 02:09 it spans all three of these rows.
• 02:13 You know what, this doesn't all the way across anymore,
• 02:16 we've added a new row, we need to add another colspan of 5, okay.
• 02:20 So, you can see this spans all three of these rows.
• 02:24 This spans all five of these columns, and
• 02:28 that can trip people up just a little bit, but colspan and rowspan, not too bad.
• 02:33 One more thing I wanna show you really quickly, we can come up here and
• 02:36 give this a border = 1, and like I said,
• 02:39 we're doing these background colors and borders and things like that.
• 02:43 You can do it like I'm doing it, but more often than not,
• 02:45 you'll define these in CSS.
• 02:47 You'll style your table with CSS, but just for this video,
• 02:50 I'm just slapping these in like this.
• 02:52 And you can do it this way, too, it's kind of not the best way to do it,
• 02:55 but it works.
• 02:55 If we give this a border, we can see now it's got all these boarders on here.
• 02:59 So and you can mess around with the border width you can make this bigger,
• 03:03 smaller, skinnier, dotted using CSS and
• 03:06 things like that, you can change colors, you can change widths and
• 03:10 all that good stuff with CSS but that sort of beyond scope of this course.
• 03:14 I just want you to have a basic understanding of tables, what they are,
• 03:17 how to create a basic table and the next video, we're gonna talk about lists

Lesson notes are only available for subscribers.