Preview
Video Player
00:00
00:00
The Table Foot Element
5:08In general, a table footer element should contain a summary of the table. This might be the final cells that are sums, totals, and averages for each column. A table footer might also just contain some meta-information about the table itself, such as how frequently the table is updated, copyright information, or perhaps the source of the data within the table.
We have a table head and a table body.
0:00
So naturally, there's a table foot element
as well.
0:02
However, if we already have table headers
that label columns
0:07
or rows, then what would be the point of a
footer?
0:12
And what would we put in it?
0:16
Well, there aren't any strict rules about
this.
0:17
But, in general, a table footer element
should contain a summary of the table.
0:20
This might be some final cells that
0:26
are sums, totals, and averages for each
column.
0:28
A table footer might also just contain
some
0:32
meta-information about the table, such as
how frequently
0:34
the table is updated, copyright
information or perhaps
0:38
the source of the data within the table.
0:42
Now, let's pretend that our table is
driven by a
0:45
database, and that it's much larger than
it appears here.
0:48
For performance reasons, let's say that
the information is
0:53
only refreshed every 15 minutes, so let's
do that now.
0:56
So here I am in my workspace, and before I
place the
1:01
table foot element, I wanna tell you a
little more about it.
1:05
It's an optional element, but it's nice to
include it for the
1:08
same reasons that it's nice to have a
header and a body.
1:11
Now, you would think that the table footer
would go at the bottom of the table.
1:15
However, it actually should go right after
the
1:21
table head and just before the table body.
1:25
So, let's open this up here and I'll say
tfoot.
1:30
And then inside of the table footer
element, I will add a table row.
1:40
And then finally, I'll add a table cell.
1:45
And I'll say data is updated every 15
minutes.
1:50
So I'll save that out and open up my
preview.
1:58
And now you can see that this is right
here down at the bottom.
2:02
Now, this table footer is nicely styled so
that
2:08
it is in italicize and a slightly, lighter
grey color.
2:11
Just so it looks like some annotations,
down here at the bottom.
2:15
However, there's a slight problem with our
table
2:19
footer, and that's that it occupies only
this column.
2:22
So there's one table cell here.
2:27
But there's no other table cells here.
2:29
And in general, you wanna try to have the
2:33
same number of cells going across in every
row.
2:34
So, maybe there is an attribute that can
help us out with that.
2:39
We'll type in MDN, and let's type in table
cell or td.
2:44
And we'll go to the documentation page
here.
2:53
And if I scroll down here,
2:57
you'll see that there's an attribute here
called colspan or column span.
3:02
And it says this attribute contains a
non-negative integer value, so just a
3:09
positive number, that indicates for how
many columns this cell extends.
3:14
So it's default value is one.
3:20
In other words, a colspan is always set on
every table
3:23
cell, and each table cell just spans
across for one column.
3:27
However, we can make this span across all
columns by
3:33
setting it to three because we have three
columns here.
3:39
So, let's go back to our code, and on that
table cell we'll say
3:43
colspan, and we'll say three.
3:49
Now if we go back and refresh this, you'll
notice
3:55
that the table decreased in size just a
little bit, and that's
4:00
because this cell is now spanning across
all three columns.
4:05
So let's go back to our code and undo
that.
4:11
Say it spans one, and watch how this
4:14
footer text is aligned with these cells
here.
4:20
So, I'll refresh,
4:25
and now you can see that this footer is
actually sort of pushing
4:28
these two columns over, because it's
longer than the rest of this text.
4:32
If we were to increase the amount of text
here even more.
4:37
Can go back and refresh, and you'll see
4:41
that it's continuing to push that column
over.
4:43
However, if we change the column span to
three,
4:47
it should just nicely span across all
three columns.
4:54
So let me just remove that extra text that
I added.
4:58
And I'll refresh the page, and that should
do it.
5:05