Preview
Video Player
00:00
00:00
Create a Basic Table
5:40Similar 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