1
00:00:00,279 --> 00:00:02,655
I've made this webpage about my pets,

2
00:00:02,655 --> 00:00:04,345
with a list of their names.

3
00:00:04,345 --> 00:00:06,747
When you look at the list, 
what do you wonder?

4
00:00:06,747 --> 00:00:11,113
I've had pets named Black & White, 
Daemon, and Angel.

5
00:00:11,113 --> 00:00:12,964
But what kind of pets were they?

6
00:00:12,964 --> 00:00:14,553
What color were they?

7
00:00:14,553 --> 00:00:16,124
How old are they?

8
00:00:16,124 --> 00:00:18,316
I should probably give you 
more information

9
00:00:18,316 --> 00:00:21,047
about the pets in this list 
to answer your questions.

10
00:00:21,047 --> 00:00:23,457
I could do that by making 
a nested list,

11
00:00:23,457 --> 00:00:26,816
or, you know, maybe
putting information in parentheses --

12
00:00:26,816 --> 00:00:30,332
So, you know, Black & white was a rabbit,


13
00:00:30,332 --> 00:00:32,213
Demon is a cat,


14
00:00:32,213 --> 00:00:34,204
and Angel is also a cat.

15
00:00:34,734 --> 00:00:37,375
But I don't like this, 
beacuse it doesn't look very organized,

16
00:00:37,375 --> 00:00:40,906
and I can't just easily skim down 
and see all of the species

17
00:00:40,906 --> 00:00:42,786
in one nicely-aligned list.

18
00:00:42,786 --> 00:00:47,346
This, is in fact, 
the perfect opportunity for a table,

19
00:00:47,346 --> 00:00:49,140
with a row for each pet,

20
00:00:49,140 --> 00:00:51,858
and columns for each attribute 
about the pet

21
00:00:51,858 --> 00:00:54,084
that I want to share with you.

22
00:00:54,084 --> 00:00:58,378
In order to make tables in HTML, 
we will need a lot of tags.

23
00:00:58,378 --> 00:00:59,958
So brace yourself.

24
00:00:59,958 --> 00:01:02,561
And don't worry about memorizing 
all these tags.

25
00:01:02,561 --> 00:01:04,434
You can always look them up later.

26
00:01:04,434 --> 00:01:07,192
It took me ten years to memorize 
all the table tags,

27
00:01:07,192 --> 00:01:08,608
and I'm a pro.

28
00:01:08,608 --> 00:01:10,436
All right, get ready!

29
00:01:10,436 --> 00:01:15,084
The first tag is ``, 

30
00:01:15,084 --> 00:01:20,017
Next, we need a header area for the table,
to hold the labels for each column.

31
00:01:20,023 --> 00:01:23,043
So we write 
``.

32
00:01:23,043 --> 00:01:27,858
Inside that, we typically just want 
a single row of header cells.

33
00:01:27,858 --> 00:01:32,002
Any time we write a row in the table, 
we use the `` tag.

34
00:01:32,002 --> 00:01:35,286
Inside that row, we want header cells.

35
00:01:35,286 --> 00:01:41,677
For a single header cell,
we write ``

36
00:01:41,677 --> 00:01:44,879
Okay, what will the first column label be?

37
00:01:44,879 --> 00:01:49,092
It'll be pet names, since that's 
the most important thing in the row,

38
00:01:49,092 --> 00:01:51,306
and the identifier for it.

39
00:01:51,306 --> 00:01:54,699
Now let's add another column for species.

40
00:01:54,699 --> 00:01:58,602
And finally, let's add a column for color.

41
00:01:58,602 --> 00:02:01,532
I think that's enough columns for now,

42
00:02:01,532 --> 00:02:03,915
let's add some data.

43
00:02:03,915 --> 00:02:05,951
We start off the rows of data

44
00:02:05,951 --> 00:02:09,473
with `` underneath our ``

45
00:02:09,473 --> 00:02:11,847
and then once again, we want a row,

46
00:02:11,847 --> 00:02:14,282
so we're going to use that `` tag.

47
00:02:14,282 --> 00:02:16,717
But inside here, instead of using ``,

48
00:02:16,717 --> 00:02:20,005
we'll use `` 
because we're in the body.

49
00:02:20,005 --> 00:02:23,136
We'll say ``, 
which stands for tabular data,

50
00:02:23,136 --> 00:02:26,471
and what is the value that goes 
in this first cell

51
00:02:26,471 --> 00:02:28,056
in the first row of data?

52
00:02:28,056 --> 00:02:30,311
Well, I'm going to just
look up to my list,

53
00:02:30,311 --> 00:02:33,801
and see that the first thing in my list 
was Black & white,

54
00:02:33,801 --> 00:02:36,019
and that's her pet name,

55
00:02:36,019 --> 00:02:40,258
so I'll just write, "Black & white".

56
00:02:40,258 --> 00:02:42,496
Now the second ``.

57
00:02:42,496 --> 00:02:46,726
We can look up and see 
that our second `` was species,

58
00:02:46,726 --> 00:02:49,724
and Black & white was a rabbit,

59
00:02:49,724 --> 00:02:52,497
so we'll write, "rabbit".

60
00:02:52,497 --> 00:02:55,159
And finally, the third ``.

61
00:02:55,159 --> 00:02:58,089
So we look up and see that 
third `` was color.

62
00:02:58,089 --> 00:03:00,177
So the corresponding ``,

63
00:03:00,177 --> 00:03:04,430
well, I was not a very creative kid 
when I named this rabbit,

64
00:03:04,430 --> 00:03:08,215
so you can probably guess the colors.

65
00:03:08,215 --> 00:03:10,767
Okay, let's do another row.

66
00:03:10,767 --> 00:03:13,067
So I'll show you a little trick.

67
00:03:13,067 --> 00:03:15,544
I like to actually, 
once I've made one row,

68
00:03:15,544 --> 00:03:17,126
I select that first row,

69
00:03:17,126 --> 00:03:19,394
and copy it, using a keyboard shortcut,

70
00:03:19,394 --> 00:03:22,588
which is usually control-C or command-C

71
00:03:22,588 --> 00:03:24,538
depending on your operating system.

72
00:03:24,538 --> 00:03:28,637
And then, I will paste it, 
also using a keyboard shortcut.

73
00:03:28,637 --> 00:03:31,082
Which is usually control-V, or command-V

74
00:03:31,082 --> 00:03:33,035
depending on your operating system.

75
00:03:33,035 --> 00:03:36,870
And now that I've pasted it, 
I will just go and change the values.

76
00:03:36,870 --> 00:03:41,779
So this one will be 
Daemon, cat, and black

77
00:03:41,779 --> 00:03:44,397
and then we'll do it one more time,

78
00:03:44,397 --> 00:03:52,705
and this one will be 
Angel, cat, and orange.

79
00:03:52,705 --> 00:03:55,607
Okay, so, it just gets really boring

80
00:03:55,607 --> 00:03:59,068
actually writing those 
``s and ``s` over and over,

81
00:03:59,068 --> 00:04:03,292
so that copy-and-paste trick 
will make all that a lot less boring.

82
00:04:03,299 --> 00:04:05,853
And there we have it: a table.

83
00:04:05,853 --> 00:04:08,041
I could easily add more columns

84
00:04:08,041 --> 00:04:10,548
just by adding another 
`` in the head,

85
00:04:10,548 --> 00:04:12,827
and then ``s in each of the rows,

86
00:04:12,827 --> 00:04:16,142
if I wanted to share more details 
about my pets.

87
00:04:16,142 --> 00:04:19,661
And you might be wondering how you can
change the way this table looks,

88
00:04:19,661 --> 00:04:22,209
like changing the borders, 
or colors or spacing.

89
00:04:22,209 --> 00:04:24,673
You can do all of that 
with CSS properties,

90
00:04:24,673 --> 00:04:27,768
which you may have already learned, 
or you'll learn soon.

91
00:04:27,768 --> 00:04:31,462
Now, try spinning-off this webpage, 
to make a list of your own pets

92
00:04:31,462 --> 00:04:33,294
or the pets you wish you had.

93
00:04:33,294 --> 00:04:35,161
Tabulate that data!