-
I've made this webpage about my pets,
-
with a list of their names.
-
When you look at the list,
what do you wonder?
-
I've had pets named Black & White,
Daemon, and Angel.
-
But what kind of pets were they?
-
What color were they?
-
How old are they?
-
I should probably give you
more information
-
about the pets in this list
to answer your questions.
-
I could do that by making
a nested list,
-
or, you know, maybe
putting information in parentheses --
-
So, you know, Black & white was a rabbit,
-
Demon is a cat,
-
and Angel is also a cat.
-
But I don't like this,
beacuse it doesn't look very organized,
-
and I can't just easily skim down
and see all of the species
-
in one nicely-aligned list.
-
This, is in fact,
the perfect opportunity for a table,
-
with a row for each pet,
-
and columns for each attribute
about the pet
-
that I want to share with you.
-
In order to make tables in HTML,
we will need a lot of tags.
-
So brace yourself.
-
And don't worry about memorizing
all these tags.
-
You can always look them up later.
-
It took me ten years to memorize
all the table tags,
-
and I'm a pro.
-
All right, get ready!
-
The first tag is ``,
-
Next, we need a header area for the table,
to hold the labels for each column.
-
So we write
``.
-
Inside that, we typically just want
a single row of header cells.
-
Any time we write a row in the table,
we use the `` tag.
-
Inside that row, we want header cells.
-
For a single header cell,
we write ``
-
Okay, what will the first column label be?
-
It'll be pet names, since that's
the most important thing in the row,
-
and the identifier for it.
-
Now let's add another column for species.
-
And finally, let's add a column for color.
-
I think that's enough columns for now,
-
let's add some data.
-
We start off the rows of data
-
with `` underneath our ``
-
and then once again, we want a row,
-
so we're going to use that `` tag.
-
But inside here, instead of using ``,
-
we'll use ``
because we're in the body.
-
We'll say ``,
which stands for tabular data,
-
and what is the value that goes
in this first cell
-
in the first row of data?
-
Well, I'm going to just
look up to my list,
-
and see that the first thing in my list
was Black & white,
-
and that's her pet name,
-
so I'll just write, "Black & white".
-
Now the second ``.
-
We can look up and see
that our second `` was species,
-
and Black & white was a rabbit,
-
so we'll write, "rabbit".
-
And finally, the third ``.
-
So we look up and see that
third `` was color.
-
So the corresponding ``,
-
well, I was not a very creative kid
when I named this rabbit,
-
so you can probably guess the colors.
-
Okay, let's do another row.
-
So I'll show you a little trick.
-
I like to actually,
once I've made one row,
-
I select that first row,
-
and copy it, using a keyboard shortcut,
-
which is usually control-C or command-C
-
depending on your operating system.
-
And then, I will paste it,
also using a keyboard shortcut.
-
Which is usually control-V, or command-V
-
depending on your operating system.
-
And now that I've pasted it,
I will just go and change the values.
-
So this one will be
Daemon, cat, and black
-
and then we'll do it one more time,
-
and this one will be
Angel, cat, and orange.
-
Okay, so, it just gets really boring
-
actually writing those
``s and ``s` over and over,
-
so that copy-and-paste trick
will make all that a lot less boring.
-
And there we have it: a table.
-
I could easily add more columns
-
just by adding another
`` in the head,
-
and then ``s in each of the rows,
-
if I wanted to share more details
about my pets.
-
And you might be wondering how you can
change the way this table looks,
-
like changing the borders,
or colors or spacing.
-
You can do all of that
with CSS properties,
-
which you may have already learned,
or you'll learn soon.
-
Now, try spinning-off this webpage,
to make a list of your own pets
-
or the pets you wish you had.
-
Tabulate that data!