The Table Foot Element5:08 with Nick Pettit
In general a table footer element should contain a summary of the table. This might be some 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.
- <tfoot> - The table foot element contains a summary of the table. This might be totals for columns of numerical data or meta information about the source of data.
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
You need to sign up for Treehouse in order to download course files.Sign up