HTML tables

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!