Creating HTML Tables

Quick reference

• 00:05 In this video, I want to talk about tables.
• 00:07 And tables are a slightly more advanced topic.
• 00:10 And they can give people a little bit of trouble sometimes.
• 00:13 But they're pretty simple to do.
• 00:14 And tables are something you're going to use a lot in HTML.
• 00:17 A lot of times when you want to format stuff around on the screen in
• 00:21 a specific way, you'll go ahead and use a table for that.
• 00:24 And so, let's come up here to our <h1>, and let's type in hiking log.
• 00:31 Now I went ahead and just pasted some table code in here.
• 00:35 And if we go ahead and look at this just to give you an idea, this is a table.
• 00:40 Right, we have headers, and then sort of items inside the table, and
• 00:45 tables are all about rows and columns.
• 00:47 So this is a row this is a row and
• 00:51 this is a row and this is a column, right?
• 00:57 I can't really highlight it cuz it highlights everything but
• 01:00 like the miles hiked that's a column the trail that's a column that
• 01:02 date that's a column that name that's a column so columns and
• 01:05 rows that's sort of which what you want to keep in mind when you're building a table.
• 01:09 So tables are pretty simple you just start out with this table tag, and it opens,
• 01:14 and it closes, and you see just for our purposes, I put the width at 50%,
• 01:18 you don't necessarily have to do this, and you might do this with CSS,
• 01:22 you see we use the Style tag, we use this for CSS type things,
• 01:26 if I change that to 100, it bops to the whole width of the screen here.
• 01:31 So whatever you want.
• 01:32 And then, there's sort of two main sections of a table.
• 01:35 There's the head, and then there's the rest of the table.
• 01:39 And this is the head, the table head.
• 01:43 And table head, <th>, right?
• 01:45 And in the table head, each column head, each heading name gets its own <th> tag.
• 01:52 So th Name, close the tag, th Date, close the tag,
• 01:57 th Trail, close the tag, th Miles, close the tag.
• 02:00 And I should mention before we even do the <th> tags where there's <tr> tag, and
• 02:04 tr stands for table row.
• 02:06 Remember I said this is a row, every time you wanna create a new row,
• 02:11 you use this <tr> tag, and I've put align left, you can do that with CSS as well.
• 02:16 So, right here, this whole bit right here, this is just our header.
• 02:22 After that, directly below that, we start with whatever next row you want.
• 02:26 So we have the <tr> tag open and close, now inside we have this <td>,
• 02:30 and td stands for table data or table cell.
• 02:34 It's basically a cell.
• 02:35 So each one of these TDs corresponds with the TH.
• 02:40 So the first one on your list is gonna be the first one here, the name.
• 02:44 The second one is gonna be second one, the date.
• 02:46 The third one is gonna be the third one, the trail.
• 02:48 And the fourth one is gonna be the fourth one.
• 02:50 So you always wanna keep in mind your structure, so you sort of align things up.
• 02:55 Now, if we create another one, I just type something, and
• 03:00 save this and hit reload, you see it's popped off to the side and
• 03:05 it doesn't line up with everything or anything and it just kind of looks weird.
• 03:09 It's really important to get your TDs lined up with your THs.
• 03:14 That's a table row and just to create another row,
• 03:17 we just duplicate the same thing.
• 03:20 TR open and close and TDs open and close for the data.
• 03:24 Finally, at the very end here we just close our table
• 03:27 with a regular closing tag.
• 03:28 And we save it and hit reload, and this is the table.
• 03:31 So you can make tables look a whole bunch of different ways but
• 03:34 you're usually gonna use CSS to do that.
• 03:37 But in this course we're just, I just wanna sort of show you
• 03:39 the basic table method and yeah, not too difficult but pretty important.
• 03:44 And in the next video we're gonna to talk about some sort of more advanced table
• 03:47 topics.

Lesson notes are only available for subscribers.