[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.28,0:00:02.66,Default,,0000,0000,0000,,I've made this webpage about my pets,
Dialogue: 0,0:00:02.66,0:00:04.34,Default,,0000,0000,0000,,with a list of their names.
Dialogue: 0,0:00:04.34,0:00:06.75,Default,,0000,0000,0000,,When you look at the list, \Nwhat do you wonder?
Dialogue: 0,0:00:06.75,0:00:11.11,Default,,0000,0000,0000,,I've had pets named Black & White, \NDaemon, and Angel.
Dialogue: 0,0:00:11.11,0:00:12.96,Default,,0000,0000,0000,,But what kind of pets were they?
Dialogue: 0,0:00:12.96,0:00:14.55,Default,,0000,0000,0000,,What color were they?
Dialogue: 0,0:00:14.55,0:00:16.12,Default,,0000,0000,0000,,How old are they?
Dialogue: 0,0:00:16.12,0:00:18.32,Default,,0000,0000,0000,,I should probably give you \Nmore information
Dialogue: 0,0:00:18.32,0:00:21.05,Default,,0000,0000,0000,,about the pets in this list \Nto answer your questions.
Dialogue: 0,0:00:21.05,0:00:23.46,Default,,0000,0000,0000,,I could do that by making \Na nested list,
Dialogue: 0,0:00:23.46,0:00:26.82,Default,,0000,0000,0000,,or, you know, maybe\Nputting information in parentheses --
Dialogue: 0,0:00:26.82,0:00:30.33,Default,,0000,0000,0000,,So, you know, Black & white was a rabbit,\N
Dialogue: 0,0:00:30.33,0:00:32.21,Default,,0000,0000,0000,,Demon is a cat,\N
Dialogue: 0,0:00:32.21,0:00:34.20,Default,,0000,0000,0000,,and Angel is also a cat.
Dialogue: 0,0:00:34.73,0:00:37.38,Default,,0000,0000,0000,,But I don't like this, \Nbeacuse it doesn't look very organized,
Dialogue: 0,0:00:37.38,0:00:40.91,Default,,0000,0000,0000,,and I can't just easily skim down \Nand see all of the species
Dialogue: 0,0:00:40.91,0:00:42.79,Default,,0000,0000,0000,,in one nicely-aligned list.
Dialogue: 0,0:00:42.79,0:00:47.35,Default,,0000,0000,0000,,This, is in fact, \Nthe perfect opportunity for a table,
Dialogue: 0,0:00:47.35,0:00:49.14,Default,,0000,0000,0000,,with a row for each pet,
Dialogue: 0,0:00:49.14,0:00:51.86,Default,,0000,0000,0000,,and columns for each attribute \Nabout the pet
Dialogue: 0,0:00:51.86,0:00:54.08,Default,,0000,0000,0000,,that I want to share with you.
Dialogue: 0,0:00:54.08,0:00:58.38,Default,,0000,0000,0000,,In order to make tables in HTML, \Nwe will need a lot of tags.
Dialogue: 0,0:00:58.38,0:00:59.96,Default,,0000,0000,0000,,So brace yourself.
Dialogue: 0,0:00:59.96,0:01:02.56,Default,,0000,0000,0000,,And don't worry about memorizing \Nall these tags.
Dialogue: 0,0:01:02.56,0:01:04.43,Default,,0000,0000,0000,,You can always look them up later.
Dialogue: 0,0:01:04.43,0:01:07.19,Default,,0000,0000,0000,,It took me ten years to memorize \Nall the table tags,
Dialogue: 0,0:01:07.19,0:01:08.61,Default,,0000,0000,0000,,and I'm a pro.
Dialogue: 0,0:01:08.61,0:01:10.44,Default,,0000,0000,0000,,All right, get ready!
Dialogue: 0,0:01:10.44,0:01:15.08,Default,,0000,0000,0000,,The first tag is ``, 
Dialogue: 0,0:01:15.08,0:01:20.02,Default,,0000,0000,0000,,Next, we need a header area for the table,\Nto hold the labels for each column.
Dialogue: 0,0:01:20.02,0:01:23.04,Default,,0000,0000,0000,,So we write \N``.
Dialogue: 0,0:01:23.04,0:01:27.86,Default,,0000,0000,0000,,Inside that, we typically just want \Na single row of header cells.
Dialogue: 0,0:01:27.86,0:01:32.00,Default,,0000,0000,0000,,Any time we write a row in the table, \Nwe use the `` tag.
Dialogue: 0,0:01:32.00,0:01:35.29,Default,,0000,0000,0000,,Inside that row, we want header cells.
Dialogue: 0,0:01:35.29,0:01:41.68,Default,,0000,0000,0000,,For a single header cell,\Nwe write ``
Dialogue: 0,0:01:41.68,0:01:44.88,Default,,0000,0000,0000,,Okay, what will the first column label be?
Dialogue: 0,0:01:44.88,0:01:49.09,Default,,0000,0000,0000,,It'll be pet names, since that's \Nthe most important thing in the row,
Dialogue: 0,0:01:49.09,0:01:51.31,Default,,0000,0000,0000,,and the identifier for it.
Dialogue: 0,0:01:51.31,0:01:54.70,Default,,0000,0000,0000,,Now let's add another column for species.
Dialogue: 0,0:01:54.70,0:01:58.60,Default,,0000,0000,0000,,And finally, let's add a column for color.
Dialogue: 0,0:01:58.60,0:02:01.53,Default,,0000,0000,0000,,I think that's enough columns for now,
Dialogue: 0,0:02:01.53,0:02:03.92,Default,,0000,0000,0000,,let's add some data.
Dialogue: 0,0:02:03.92,0:02:05.95,Default,,0000,0000,0000,,We start off the rows of data
Dialogue: 0,0:02:05.95,0:02:09.47,Default,,0000,0000,0000,,with `` underneath our ``
Dialogue: 0,0:02:09.47,0:02:11.85,Default,,0000,0000,0000,,and then once again, we want a row,
Dialogue: 0,0:02:11.85,0:02:14.28,Default,,0000,0000,0000,,so we're going to use that `` tag.
Dialogue: 0,0:02:14.28,0:02:16.72,Default,,0000,0000,0000,,But inside here, instead of using ``,
Dialogue: 0,0:02:16.72,0:02:20.00,Default,,0000,0000,0000,,we'll use `` \Nbecause we're in the body.
Dialogue: 0,0:02:20.00,0:02:23.14,Default,,0000,0000,0000,,We'll say ``, \Nwhich stands for tabular data,
Dialogue: 0,0:02:23.14,0:02:26.47,Default,,0000,0000,0000,,and what is the value that goes \Nin this first cell
Dialogue: 0,0:02:26.47,0:02:28.06,Default,,0000,0000,0000,,in the first row of data?
Dialogue: 0,0:02:28.06,0:02:30.31,Default,,0000,0000,0000,,Well, I'm going to just\Nlook up to my list,
Dialogue: 0,0:02:30.31,0:02:33.80,Default,,0000,0000,0000,,and see that the first thing in my list \Nwas Black & white,
Dialogue: 0,0:02:33.80,0:02:36.02,Default,,0000,0000,0000,,and that's her pet name,
Dialogue: 0,0:02:36.02,0:02:40.26,Default,,0000,0000,0000,,so I'll just write, "Black & white".
Dialogue: 0,0:02:40.26,0:02:42.50,Default,,0000,0000,0000,,Now the second ``.
Dialogue: 0,0:02:42.50,0:02:46.73,Default,,0000,0000,0000,,We can look up and see \Nthat our second `` was species,
Dialogue: 0,0:02:46.73,0:02:49.72,Default,,0000,0000,0000,,and Black & white was a rabbit,
Dialogue: 0,0:02:49.72,0:02:52.50,Default,,0000,0000,0000,,so we'll write, "rabbit".
Dialogue: 0,0:02:52.50,0:02:55.16,Default,,0000,0000,0000,,And finally, the third ``.
Dialogue: 0,0:02:55.16,0:02:58.09,Default,,0000,0000,0000,,So we look up and see that \Nthird `` was color.
Dialogue: 0,0:02:58.09,0:03:00.18,Default,,0000,0000,0000,,So the corresponding ``,
Dialogue: 0,0:03:00.18,0:03:04.43,Default,,0000,0000,0000,,well, I was not a very creative kid \Nwhen I named this rabbit,
Dialogue: 0,0:03:04.43,0:03:08.22,Default,,0000,0000,0000,,so you can probably guess the colors.
Dialogue: 0,0:03:08.22,0:03:10.77,Default,,0000,0000,0000,,Okay, let's do another row.
Dialogue: 0,0:03:10.77,0:03:13.07,Default,,0000,0000,0000,,So I'll show you a little trick.
Dialogue: 0,0:03:13.07,0:03:15.54,Default,,0000,0000,0000,,I like to actually, \Nonce I've made one row,
Dialogue: 0,0:03:15.54,0:03:17.13,Default,,0000,0000,0000,,I select that first row,
Dialogue: 0,0:03:17.13,0:03:19.39,Default,,0000,0000,0000,,and copy it, using a keyboard shortcut,
Dialogue: 0,0:03:19.39,0:03:22.59,Default,,0000,0000,0000,,which is usually control-C or command-C
Dialogue: 0,0:03:22.59,0:03:24.54,Default,,0000,0000,0000,,depending on your operating system.
Dialogue: 0,0:03:24.54,0:03:28.64,Default,,0000,0000,0000,,And then, I will paste it, \Nalso using a keyboard shortcut.
Dialogue: 0,0:03:28.64,0:03:31.08,Default,,0000,0000,0000,,Which is usually control-V, or command-V
Dialogue: 0,0:03:31.08,0:03:33.04,Default,,0000,0000,0000,,depending on your operating system.
Dialogue: 0,0:03:33.04,0:03:36.87,Default,,0000,0000,0000,,And now that I've pasted it, \NI will just go and change the values.
Dialogue: 0,0:03:36.87,0:03:41.78,Default,,0000,0000,0000,,So this one will be \NDaemon, cat, and black
Dialogue: 0,0:03:41.78,0:03:44.40,Default,,0000,0000,0000,,and then we'll do it one more time,
Dialogue: 0,0:03:44.40,0:03:52.70,Default,,0000,0000,0000,,and this one will be \NAngel, cat, and orange.
Dialogue: 0,0:03:52.70,0:03:55.61,Default,,0000,0000,0000,,Okay, so, it just gets really boring
Dialogue: 0,0:03:55.61,0:03:59.07,Default,,0000,0000,0000,,actually writing those \N``s and ``s` over and over,
Dialogue: 0,0:03:59.07,0:04:03.29,Default,,0000,0000,0000,,so that copy-and-paste trick \Nwill make all that a lot less boring.
Dialogue: 0,0:04:03.30,0:04:05.85,Default,,0000,0000,0000,,And there we have it: a table.
Dialogue: 0,0:04:05.85,0:04:08.04,Default,,0000,0000,0000,,I could easily add more columns
Dialogue: 0,0:04:08.04,0:04:10.55,Default,,0000,0000,0000,,just by adding another \N`` in the head,
Dialogue: 0,0:04:10.55,0:04:12.83,Default,,0000,0000,0000,,and then ``s in each of the rows,
Dialogue: 0,0:04:12.83,0:04:16.14,Default,,0000,0000,0000,,if I wanted to share more details \Nabout my pets.
Dialogue: 0,0:04:16.14,0:04:19.66,Default,,0000,0000,0000,,And you might be wondering how you can\Nchange the way this table looks,
Dialogue: 0,0:04:19.66,0:04:22.21,Default,,0000,0000,0000,,like changing the borders, \Nor colors or spacing.
Dialogue: 0,0:04:22.21,0:04:24.67,Default,,0000,0000,0000,,You can do all of that \Nwith CSS properties,
Dialogue: 0,0:04:24.67,0:04:27.77,Default,,0000,0000,0000,,which you may have already learned, \Nor you'll learn soon.
Dialogue: 0,0:04:27.77,0:04:31.46,Default,,0000,0000,0000,,Now, try spinning-off this webpage, \Nto make a list of your own pets
Dialogue: 0,0:04:31.46,0:04:33.29,Default,,0000,0000,0000,,or the pets you wish you had.
Dialogue: 0,0:04:33.29,0:04:35.16,Default,,0000,0000,0000,,Tabulate that data!