Preview
Video Player
00:00
00:00
The Table Header Cell Element
5:15The table header cell element helps to differentiate between header cells and regular table data. This is helpful for search engine crawlers and screen readers, as well as for CSS styling.
So far we've created a basic table, but
its not clear that
0:00
our first row is actually an attempt to
label each of our columns.
0:04
Right now, the first row simply looks like
more data with name, email and job role.
0:09
We can use a table header cell element on
each of these
0:15
three columns to tell the browser, search
engine crawlers, and screen readers.
0:19
That these are actually headers and not
just regular data.
0:24
So, let's do that now.
0:28
So, let's scroll down in our workspace.
0:31
And lets take a look at this first table
row.
0:34
I'm going to open a preview and right now
this just looks like more data.
0:38
Like another name, another email address,
and another job role.
0:44
So it doesn't look like these are labeling
the columns.
0:48
At least to the browser.
0:52
But we can change that by changing these
0:55
from table cells to a table header cell
element.
0:57
To do that I'll type th
1:04
instead of td.
1:08
So, let's fix each one of those.
1:11
And you'll notice that work spaces is
highlighting some tags in
1:14
red because it's saying that this tag is
not closed properly.
1:18
But we can fix each one of those.
1:24
So we'll save that out.
1:27
Switch back.
1:28
And refresh.
1:30
And at this point, you shouldn't see
anything different.
1:33
But it is now telling the browser that
these are table header cell elements.
1:36
We should also think about labeling our
names as table header cells
1:43
because even they're not labeling columns,
they are labeling rows.
1:48
So it would be nice for example, to know
that this
1:54
email address and this job role is
associated with this name.
1:57
So let's do that now.
2:04
We'll change this one to a table header
2:08
cell element instead of a regular table
cell.
2:12
We'll do that for the next name here.
2:16
And we'll do this one.
2:23
And then finally, we'll change the last
one.
2:24
So we'll save that out.
2:29
Switch back and refresh, and again, you
2:31
shouldn't see anything different at this
point.
2:33
But now, each row is labeled just like
each column is labeled.
2:35
At this point though it's not really clear
if a
2:42
table header is actually labeling a column
or a row.
2:45
So for example, this table header cell
element could be
2:51
labeling this row or it could be labeling
this column.
2:56
Same for any of the others.
3:01
So let's go over to the documentation and
see
3:04
if there's an attribute that can help us
out here.
3:06
I'm going to type in mdn with a space and
type in th.
3:09
So here we see the table header cell
element and let's scroll down.
3:16
We'll see a lot of deprecated attributes.
3:24
But here, we have the scope attribute.
3:28
And it says this enumerated attribute
defines the cells
3:31
that the header defined in this th element
relates to.
3:35
It may have the following values, so
3:40
it could have row, column, rowgroup or
colgroup.
3:43
But, we're going to focus on row and
column.
3:49
So if we label something as a row, it
means that the
3:53
header cell relates to all cells in a row
that element belongs to.
3:58
If we label something as a column.
4:03
It will label the column.
4:05
So, let's go back
4:07
and we'll go up to our first table header
cell elements.
4:11
We'll type in scope and we'll say it's
equal to column.
4:16
Because this name, this email, and this
job
4:23
role are labeling each of our three
columns.
4:27
So let's do that for the others.
4:31
I'm just going to copy this to my
clipboard and paste it two times here.
4:33
And then, we need to label each one of
these.
4:38
So, I'm going to say scope, and instead of
column, I'm going to say row.
4:42
Because each one of these names is
actually labeling
4:46
a row, going across instead of up and
down.
4:51
So I'll copy that to my clipboard.
4:56
And I'll paste it and the three more names
here.
4:59
One, two, three.
5:03
And we can save that out.
5:05
We'll switch back to the browser and
refresh one more time.
5:07
But, there shouldn't be any sorta visual
change.
5:11