Check out a free preview of the full CSS In-Depth, v2 course:
The "Overview & Semantics" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

While not appropriate, or needed, for layout, tables are still important, but only for presenting data. Estelle gives an overview of the semantic elements that make up tables, including caption, colgroup, col, thead, tbody, tfoot, tr and td.

Get Unlimited Access Now

Transcript from the "Overview & Semantics" Lesson

[00:00:02]
>> Estelle: We're gonna continue on with HTML tables and the CSS associated with tables. The URL for this is still at my estelle.github.io/cssmastery/tables if at any point you get lost. You don't have to remember all of that, just go to estelle.github.io, that's the only part you need to remember.

[00:00:23] And then hopefully you'll realize that we are still talking about tables if we're in the tables section. So,
>> Estelle: We used to use tables for layout. And I don't know if anyone here has been doing the web for that long, but about 14 years ago, we slowly stopped.

[00:00:43] And I think about ten years ago, we fully stopped, and people stopped learning how to do that. But tables are still important if you're going to do the presentation of data. Now, depends what type of data. If you're gonna have someone's face with a description next to it and then someone else like your board of directors on a web page, a table's not appropriate.

[00:01:07] But if you are presenting data comparing it and something that you might be able to sort or to calculate or that you need to cross-reference, that would be an appropriate use of a table. So if you ever need to sort something, a table might be the right thing, even if you don't include functionality to the sort.

[00:01:28] Like you're never gonna sort days on a calendar, but a table might be a right layout for that. Cuz it is kind of a table of weeks and months and years, but you could also use list items. But if you're going to do all the different types of ice cream with the calories you should be shot, cuz we don't want to know.

[00:01:56] But basically, it's not for presentation, if something's presentational, don't use tables. But if you do need tables, you do need to know how to use them. So one thing people don't know is how to actually code a table. So there is the markup for a table, let's actually go on to this slide first.

[00:02:13] So the first thing that comes inside a table is the caption and that is used to described a table. And then you can have column groups, and inside those column groups are empty elements called col, standing for each column. And you could actually put a span on that column.

[00:02:31] Then you could have the thead, tbody, and tfoot. You can have multiple tbodys, you can have multiple theads and you can have multiple tfoot. It used to be in HTML that tfoot, it used to be thead, tfoot, tbody. But they change it and made it logical and now tfoot can come after.

[00:02:50] So, if you actually to code the whole thing out, it will look something like this, which is table, opening and closing caption tags, a column group with the one col for each column. Or if you're gonna have call span = 2 on one of them then it would be one less.

[00:03:10] Then the thead, inside the thead, the only child inside a thead would be a table row. And inside a table row you can have different types of table heads. Either table headings or tds, I guess which stands for table data, I'm not sure what td stands for. And then so you close out the thead, you can open up a tbody, you can put in another thead and another tbody and then you can put it in a tfoot.

[00:03:35] You don't necessarily need a tfoot if you're gonna total all the values from above, or give the average of all the calories of every single ice cream. You should be shot, you can put that in the tfoot at the bottom.