Basic HTML for Tables

[00:00:00]
>> Jen Kramer: So in your chapter 9 folder you will find the link to this particular CodePen. So if you go into chapter number 9, go into your instructions. You'll find a link to the starting CodePen here. And I'm gonna go through now, responsive tables. We're gonna look at these in isolation in CodePen.

[00:00:24]
And then, of course, we'll look at them in the context of our web page layout as well. So what I've got here to get me started is a little bit of HTML. We're talking about fruit, because the fine USDA happens to give me some lovely tabular data with information about the nutrition of fruit.

[00:00:44]
Because that's just great content for putting together a table, right? You all know how this works. So I'll show you what we have so far.
>> Jen Kramer: Here we go. So we've got our title here, Talking About of Fruit. We have the h1 as the title of the web page, while the caption is discussing the contents of the table, a little bit about that.

[00:01:07]
And then we have our actual table that's here. And so what I am gonna walk you through now is some pointers about making tables, first of all, accessible. Then we're gonna go talk about how to make a table responsive, beyond the scroll bar. And then you're gonna get to try it on your own.

[00:01:23]
You're gonna apply this to a table that you're going to put inside of our web page layout as we've been working on it so far. Sound good? Okay, so first of all,
>> Jen Kramer: So we've got this little bit of text, on up here in the top, we can safely ignore.

[00:01:40]
So this is just basic table-based layout. Tables are coming back again, as people are doing more and more stuff with big data, right? You need to publish the actual chart of the data, in addition to whatever cool JavaScript visualization of that data you're doing. And this is basically the way you go about coding a table.

[00:01:57]
You probably already know this. There's a table tag. There's rows, that's the tr. There's d's, those are the table data, right? So far, so good, that's what we've got going on here. Okay, so we're missing several key pieces to this table, that I'd like to talk you through as to why we're going to add them.

[00:02:16]
So first of all, here with the table, it always should be something that you would wanna do, to add a caption.
>> Jen Kramer: So we'll go ahead and add a caption. This is the Vitamin C and K content of common fruits. Don't go to sleep on me. Someone is interested in this, okay?

[00:02:42]
So there we go, there's our caption, all right? And then after that, this stuff right here, our Description, Weight, Measure, Vitamin C, Vitamin K, what is that, actually?
>> Speaker 2: Table header.
>> Jen Kramer: Yeah, some kind of table header, right? These are the labels for these particular columns, aren't they?

[00:03:04]
So we can improve the markup of this. Does anyone have any suggestions for what we should do here?
>> Speaker 3: thead and th's.
>> Jen Kramer: Okay, so a thead. So the thead tag goes here, right before the row. Okay, so before the row, and then you're gonna close that head after the row.

[00:03:30]
And thead is sort of an artificial construct. It's going to dictate exactly what we have going on here, for where the head of this table is going to be. There's some other things that we can do here to improve accessibility and improve our markup. What else should we do inside of thead here?

[00:03:51]
>> Jen Kramer: What else should we do in the table head?
>> Speaker 3: Change the td's to th's.
>> Jen Kramer: Change our td's to th's, absolutely. So these should actually be th's, not td's, because these are heads of the table. And that's why we use this markup.
>> Jen Kramer: It looks like I might have changed the front part here, but not the back.

[00:04:14]
Okay, so there we go, th's. And there's one other thing that we can do here, anyone else? Anyone have an idea? I'm sure Amy knows. What else should we add, Amy?
>> Amy: We can scope.
>> Jen Kramer: We can scope it. Okay, so we can add here also the scope="col".

[00:04:37]
So in other words, this is making it extremely clear to screen readers that these are table headers that are for the columns, as opposed to the rows. Makes sense? So these are simple things that you can do that take three seconds to put in, and will increase the accessibility of your site very, very quickly.

[00:05:01]
>> Jen Kramer: Okay, then the other thing to put in, now that we're done through the head here, you can label. Obviously, if there's a head, there must be a body, right? So we can put in a tbody tag. And that will basically be the rest of this particular table.

[00:05:19]
>> Jen Kramer: There is a tfoot tag, just so you know. So just after the /tr here, we'll put in our /tbody, okay? There is a tfoot tag. Typically, a tfoot tag is gonna go around. Like if we were adding up all the numbers in this column and maybe we have a series of totals at the bottom, that would be a good example of something that'd be marked up with the foot tag.