< Return to Video

HTML tables

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

English subtitles

Revisions