Preview
Video Player
00:00
00:00
The Table Head and Body Elements
3:06The table head element is a completely different element from the table header cell element. In combination with the table body element, the table will gain additional structure.
[MUSIC]
0:00
Our table is looking pretty good, but
there's more that we can do to add
0:04
some additional structure to our table,
this
0:09
extra structure can be helpful for
automated pieces
0:12
of software, like search engines or screen
0:15
readers, but it's also helpful for
designers, because
0:18
it adds some additional elements that can
be
0:21
targeted with CSS, so let's take a look.
0:24
Similar to the structure of an HTML
document, where we have a head and
0:28
a body, we can also add a head and a body
to our table.
0:33
Now, we won't use the same HTML elements,
because that would
0:39
be invalid syntax but we can add a table
head element.
0:42
So, I'm going to type this in here and
this is going to wrap, the first row
0:49
in our table and I'm just going to
highlight this and indent it there we go.
1:00
And the table head element is actually a
1:10
completely different element, from the
table header cell element.
1:13
The table head element, warps a set of
rows that defines the
1:20
columns, for table, which is what these
table header cell elements define.
1:26
Now, the table head elements Is not 100%
necessary, but it's nice to define
1:32
this for search engine crawlers and access
1:40
ability purposes, and it's also helpful
for styling.
1:43
So let's save this out, switch back to our
preview,
1:48
and now you'll notice that this is nicely
styled and highlighted, and
1:53
that's because there is some CSS included
with this workspace, that will
1:58
automatically target the table head and
highlight it nicely.
2:03
So let's go back to our workspace, and
let's add a
2:09
T body element, so I'm going to put that
right here.
2:13
And I will close it down
2:18
here at the bottom, and the table body
will wrap all of the content
2:25
of our table, and not anything that
actually labels our columns, like up here.
2:32
So, I'll indent that by one tab, save that
out, and switch back and refresh,
2:38
and you shouldn't really notice anything
different, but similar to the T-head,
2:45
the T-body, just defines the body of
table, and it should always wrap
2:50
all of the data, Inside of your table and
shouldn't include the first row.
2:56
This element is also optional but it is
nice to have
3:02