WEBVTT 00:00:00.279 --> 00:00:02.655 I've made this webpage about my pets, 00:00:02.655 --> 00:00:04.345 with a list of their names. 00:00:04.345 --> 00:00:06.747 When you look at the list, what do you wonder? 00:00:06.747 --> 00:00:11.113 I've had pets named Black & White, Daemon, and Angel. 00:00:11.113 --> 00:00:12.964 But what kind of pets were they? 00:00:12.964 --> 00:00:14.553 What color were they? 00:00:14.553 --> 00:00:16.124 How old are they? 00:00:16.124 --> 00:00:18.316 I should probably give you more information 00:00:18.316 --> 00:00:21.047 about the pets in this list to answer your questions. 00:00:21.047 --> 00:00:23.457 I could do that by making a nested list, 00:00:23.457 --> 00:00:26.816 or, you know, maybe putting information in parentheses -- 00:00:26.816 --> 00:00:30.332 So, you know, Black & white was a rabbit, 00:00:30.332 --> 00:00:32.213 Demon is a cat, 00:00:32.213 --> 00:00:34.204 and Angel is also a cat. 00:00:34.734 --> 00:00:37.375 But I don't like this, beacuse it doesn't look very organized, 00:00:37.375 --> 00:00:40.906 and I can't just easily skim down and see all of the species 00:00:40.906 --> 00:00:42.786 in one nicely-aligned list. 00:00:42.786 --> 00:00:47.346 This, is in fact, the perfect opportunity for a table, 00:00:47.346 --> 00:00:49.140 with a row for each pet, 00:00:49.140 --> 00:00:51.858 and columns for each attribute about the pet 00:00:51.858 --> 00:00:54.084 that I want to share with you. 00:00:54.084 --> 00:00:58.378 In order to make tables in HTML, we will need a lot of tags. 00:00:58.378 --> 00:00:59.958 So brace yourself. 00:00:59.958 --> 00:01:02.561 And don't worry about memorizing all these tags. 00:01:02.561 --> 00:01:04.434 You can always look them up later. 00:01:04.434 --> 00:01:07.192 It took me ten years to memorize all the table tags, 00:01:07.192 --> 00:01:08.608 and I'm a pro. 00:01:08.608 --> 00:01:10.436 All right, get ready! 00:01:10.436 --> 00:01:15.084 The first tag is ``, 00:01:15.084 --> 00:01:20.017 Next, we need a header area for the table, to hold the labels for each column. 00:01:20.023 --> 00:01:23.043 So we write ``. 00:01:23.043 --> 00:01:27.858 Inside that, we typically just want a single row of header cells. 00:01:27.858 --> 00:01:32.002 Any time we write a row in the table, we use the `` tag. 00:01:32.002 --> 00:01:35.286 Inside that row, we want header cells. 00:01:35.286 --> 00:01:41.677 For a single header cell, we write `` 00:01:41.677 --> 00:01:44.879 Okay, what will the first column label be? 00:01:44.879 --> 00:01:49.092 It'll be pet names, since that's the most important thing in the row, 00:01:49.092 --> 00:01:51.306 and the identifier for it. 00:01:51.306 --> 00:01:54.699 Now let's add another column for species. 00:01:54.699 --> 00:01:58.602 And finally, let's add a column for color. 00:01:58.602 --> 00:02:01.532 I think that's enough columns for now, 00:02:01.532 --> 00:02:03.915 let's add some data. 00:02:03.915 --> 00:02:05.951 We start off the rows of data 00:02:05.951 --> 00:02:09.473 with `` underneath our `` 00:02:09.473 --> 00:02:11.847 and then once again, we want a row, 00:02:11.847 --> 00:02:14.282 so we're going to use that `` tag. 00:02:14.282 --> 00:02:16.717 But inside here, instead of using ``, 00:02:16.717 --> 00:02:20.005 we'll use `` because we're in the body. 00:02:20.005 --> 00:02:23.136 We'll say ``, which stands for tabular data, 00:02:23.136 --> 00:02:26.471 and what is the value that goes in this first cell 00:02:26.471 --> 00:02:28.056 in the first row of data? 00:02:28.056 --> 00:02:30.311 Well, I'm going to just look up to my list, 00:02:30.311 --> 00:02:33.801 and see that the first thing in my list was Black & white, 00:02:33.801 --> 00:02:36.019 and that's her pet name, 00:02:36.019 --> 00:02:40.258 so I'll just write, "Black & white". 00:02:40.258 --> 00:02:42.496 Now the second ``. 00:02:42.496 --> 00:02:46.726 We can look up and see that our second `` was species, 00:02:46.726 --> 00:02:49.724 and Black & white was a rabbit, 00:02:49.724 --> 00:02:52.497 so we'll write, "rabbit". 00:02:52.497 --> 00:02:55.159 And finally, the third ``. 00:02:55.159 --> 00:02:58.089 So we look up and see that third `` was color. 00:02:58.089 --> 00:03:00.177 So the corresponding ``, 00:03:00.177 --> 00:03:04.430 well, I was not a very creative kid when I named this rabbit, 00:03:04.430 --> 00:03:08.215 so you can probably guess the colors. 00:03:08.215 --> 00:03:10.767 Okay, let's do another row. 00:03:10.767 --> 00:03:13.067 So I'll show you a little trick. 00:03:13.067 --> 00:03:15.544 I like to actually, once I've made one row, 00:03:15.544 --> 00:03:17.126 I select that first row, 00:03:17.126 --> 00:03:19.394 and copy it, using a keyboard shortcut, 00:03:19.394 --> 00:03:22.588 which is usually control-C or command-C 00:03:22.588 --> 00:03:24.538 depending on your operating system. 00:03:24.538 --> 00:03:28.637 And then, I will paste it, also using a keyboard shortcut. 00:03:28.637 --> 00:03:31.082 Which is usually control-V, or command-V 00:03:31.082 --> 00:03:33.035 depending on your operating system. 00:03:33.035 --> 00:03:36.870 And now that I've pasted it, I will just go and change the values. 00:03:36.870 --> 00:03:41.779 So this one will be Daemon, cat, and black 00:03:41.779 --> 00:03:44.397 and then we'll do it one more time, 00:03:44.397 --> 00:03:52.705 and this one will be Angel, cat, and orange. 00:03:52.705 --> 00:03:55.607 Okay, so, it just gets really boring 00:03:55.607 --> 00:03:59.068 actually writing those ``s and ``s` over and over, 00:03:59.068 --> 00:04:03.292 so that copy-and-paste trick will make all that a lot less boring. 00:04:03.299 --> 00:04:05.853 And there we have it: a table. 00:04:05.853 --> 00:04:08.041 I could easily add more columns 00:04:08.041 --> 00:04:10.548 just by adding another `` in the head, 00:04:10.548 --> 00:04:12.827 and then ``s in each of the rows, 00:04:12.827 --> 00:04:16.142 if I wanted to share more details about my pets. 00:04:16.142 --> 00:04:19.661 And you might be wondering how you can change the way this table looks, 00:04:19.661 --> 00:04:22.209 like changing the borders, or colors or spacing. 00:04:22.209 --> 00:04:24.673 You can do all of that with CSS properties, 00:04:24.673 --> 00:04:27.768 which you may have already learned, or you'll learn soon. 00:04:27.768 --> 00:04:31.462 Now, try spinning-off this webpage, to make a list of your own pets 00:04:31.462 --> 00:04:33.294 or the pets you wish you had. 00:04:33.294 --> 00:04:35.161 Tabulate that data!