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
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

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.

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