Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Tables

Well done!

You have completed HTML Tables!

Sign up for Treehouse Back to Library

Create a Basic Table

5:40 with Nick Pettit

Similar to an HTML form, you start out creating an HTML table by using the <table> element. It has an opening and closing tag, and it wraps all the table rows and table cells inside of it.

HTML Elements

  • <table> - The table element represents data in a series of rows and columns. Tables should only be used for displaying tabular data, and never for page layout.
  • <tr> - The table row element defines a row of cells in a table. Table rows can be filled with table cells and table header cells.
  • <td> - The table cell element contains data and represents a single table cell. Each table cell should be inside a table row.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Similar to an HTML form, you start out 0:00
    creating an HTML table by using the table element. 0:03
    It has an opening and closing tag, and it wraps 0:08
    all the table rows and table cells, inside of it. 0:11
    We'll get to those in just a minute, but first, let's create a table element. 0:15
    So, here I'm in my workspace and I have some starter HTML code, 0:20
    and I'm going to type table, and when I 0:26
    close that tag, you'll see that the closing table tag is typed out for me. 0:32
    You'll also notice, that I have not typed any attributes. 0:41
    That's because tables have no attributes, other than the global attributes. 0:45
    If you've ever worked with tables before, you 0:51
    may have used some attributes in the past. 0:53
    However, they are all now deprecated. 0:57
    If we open up another tab. 1:01
    We can type in MDN, or Mozilla Developer Network. 1:03
    And then we can type in table, and that 1:07
    will bring us to the page for an HTML table. 1:10
    And if we scroll through the documentation, for the HTML table 1:16
    element, you'll notice that each one of these attributes has a 1:19
    thumbs down next to it, and it says this deprecated API, 1:23
    should no longer be used, but it will probably still work. 1:27
    So border, cellpadding, cellspacing, frame, rules, summary, and all 1:32
    of the rest of the attributes have been deprecated. 1:38
    So when you type a table element, it should look just like that. 1:42
    Now, let's type a table row, tables are made 1:47
    up of rows of information, that go across the page. 1:52
    However, there is no table column element that goes up and down. 1:56
    In other words, columns are implicit and are simply 2:01
    emergent from how many table cells, are inside each row. 2:05
    So, let's hit enter, and make some space and we'll type a tr element for table 2:10
    row, and when we close it, the closing tag will be typed out for us. 2:18
    Now inside of that, we can type table cells. 2:28
    And the table cells, contain our data. 2:31
    There shouldn't be any content outside of a 2:34
    table cell, such as inside a row, for example. 2:36
    So, we wouldn't type content here, rather, we want to type a table 2:40
    cell, which is a TD tag, and then we can type our content inside. 2:47
    So now, let's type some content for our table cells. 2:55
    So, I'm going to type the word name, and I'm going to select this line, 2:59
    and copy it to my clipboard, and then I'll paste it two more times, 3:07
    and I'll type email, and finally, I'll type job role. 3:15
    So, here we've created one table row, with 3:20
    three table cells inside of it, going across. 3:26
    So let's save that out, and click the Preview 3:30
    button in Work spaces, to see what this looks like. 3:34
    Here we have our table row, with three cells going across. 3:38
    Let's type out the rest of the table, I'm going to make some room to work here, 3:43
    and I'm just going to copy this entire table row with 3:50
    its cells, and paste it and then I'll replace this information. 3:54
    So, here we're actually going down the table, so I'll type, Nick 4:00
    Pettit cuz that's my name, and then I'll just type an example E-mail address, 4:07
    Nick@example.com, and then I'll type a job role, Web Designer. 4:13
    So, if we save that, go back to our preview, and refresh, you can see that 4:21
    we now have another row and it lines up with each one of the columns. 4:27
    So, here's Name, E-mail, and Job role. 4:33
    Let's create a few more table rows, 4:38
    by copying and pasting. 4:42
    So I'll create three more rows here, and 4:45
    then I'll replace the information with some dummy data. 4:48
    So, I'll type in Andrew Chakley, and we'll say andrew@example.com, 4:53
    and, we'll say he's a Front-End Developer. 5:01
    [SOUND] We'll type in Dave McFarland, we'll say Dave@example.com. 5:07
    And we'll say he's also a front end developer. 5:15
    And then finally, we'll type in Guil. 5:19
    [BLANK_AUDIO] 5:24
    And we'll keep that as Web Designer. 5:28
    So let's save that, go back and refresh. 5:30
    And now, you can see, we have this nice table, and it's populated with data. 5:33

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up