1
00:00:00,634 --> 00:00:04,655
[MUSIC]

2
00:00:04,655 --> 00:00:09,196
Our table is looking pretty good, but
there's more that we can do to add

3
00:00:09,196 --> 00:00:12,150
some additional structure to our table,
this

4
00:00:12,150 --> 00:00:15,482
extra structure can be helpful for
automated pieces

5
00:00:15,482 --> 00:00:18,282
of software, like search engines or screen

6
00:00:18,282 --> 00:00:21,992
readers, but it's also helpful for
designers, because

7
00:00:21,992 --> 00:00:24,794
it adds some additional elements that can
be

8
00:00:24,794 --> 00:00:27,550
targeted with CSS, so let's take a look.

9
00:00:28,800 --> 00:00:33,740
Similar to the structure of an HTML
document, where we have a head and

10
00:00:33,740 --> 00:00:39,280
a body, we can also add a head and a body
to our table.

11
00:00:39,280 --> 00:00:42,710
Now, we won't use the same HTML elements,
because that would

12
00:00:42,710 --> 00:00:48,400
be invalid syntax but we can add a table
head element.

13
00:00:49,510 --> 00:00:58,280
So, I'm going to type this in here and
this is going to wrap, the first row

14
00:01:00,990 --> 00:01:08,840
in our table and I'm just going to
highlight this and indent it there we go.

15
00:01:10,280 --> 00:01:13,960
And the table head element is actually a

16
00:01:13,960 --> 00:01:20,670
completely different element, from the
table header cell element.

17
00:01:20,670 --> 00:01:26,020
The table head element, warps a set of
rows that defines the

18
00:01:26,020 --> 00:01:32,580
columns, for table, which is what these
table header cell elements define.

19
00:01:32,580 --> 00:01:40,770
Now, the table head elements Is not 100%
necessary, but it's nice to define

20
00:01:40,770 --> 00:01:43,710
this for search engine crawlers and access

21
00:01:43,710 --> 00:01:48,030
ability purposes, and it's also helpful
for styling.

22
00:01:48,030 --> 00:01:53,430
So let's save this out, switch back to our
preview,

23
00:01:53,430 --> 00:01:58,490
and now you'll notice that this is nicely
styled and highlighted, and

24
00:01:58,490 --> 00:02:03,620
that's because there is some CSS included
with this workspace, that will

25
00:02:03,620 --> 00:02:09,360
automatically target the table head and
highlight it nicely.

26
00:02:09,360 --> 00:02:13,260
So let's go back to our workspace, and
let's add a

27
00:02:13,260 --> 00:02:18,414
T body element, so I'm going to put that
right here.

28
00:02:18,414 --> 00:02:25,870
And I will close it down

29
00:02:25,870 --> 00:02:32,070
here at the bottom, and the table body
will wrap all of the content

30
00:02:32,070 --> 00:02:36,930
of our table, and not anything that
actually labels our columns, like up here.

31
00:02:38,280 --> 00:02:45,260
So, I'll indent that by one tab, save that
out, and switch back and refresh,

32
00:02:45,260 --> 00:02:50,154
and you shouldn't really notice anything
different, but similar to the T-head,

33
00:02:50,154 --> 00:02:56,130
the T-body, just defines the body of
table, and it should always wrap

34
00:02:56,130 --> 00:03:02,290
all of the data, Inside of your table and
shouldn't include the first row.

35
00:03:02,290 --> 00:03:06,090
This element is also optional but it is
nice to have