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