Basic CSS for Tables

[00:00:00]
>> Jen Kramer: We have gone ahead and fixed our HTML, and made it semantic. So then the second step, and I'm gonna fork this. If you're following along and want to do separate code pens, that's the end of part one. We're going on to part two. And in part two, we're gonna add a little bit of accessibility stuff to this, in addition to adding a side scroll.

[00:00:24]
So the side scroll is what you get in bootstrap when you call a responsive table. You wind up getting little scroll bars on the tables, because everybody just loves scrolling around tables on their phones, yeah? Okay, so let's go through how to go about doing that. And do it in an accessible way.

[00:00:40]
So what we're going to do here is before the table tag, we're gonna add our div tag, okay. Then this div tag, the purpose of it is going to be to scroll. So we'll give it a class, which is how we're going to make it scroll, tablescroll, okay.

[00:01:02]
And then we can give it some of these aria things that are going to help with accessibility, aria-labelledby, nutrients. Okay, and where is that coming from? That's actually gonna come from our caption here. So let me just connect those two for you. So here in our caption, we're gonna give this an id of nutrients.

[00:01:29]
>> Jen Kramer: So this is gonna tell the screen reader that this div is actually associated with this caption here. That's the way you set that up. So back to that div that I sort of half put in. We've got our aria labelledby. We've got a role, you can call this a role of a region.

[00:01:49]
>> Jen Kramer: And then we can give this a tabindex of 0.
>> Jen Kramer: Okay, so that's gonna help a lot with accessibility there, and give screen readers instruction about what's going on, why this div exists. And then obviously, at the end of our table, we'll go ahead and put in our closing div tag.

[00:02:13]
You have to scroll for a while to get there. So now, the next thing that we need to do is we're gonna style that. So the side scroll, vertical, horizontal scroll thing, that is controlled by this div thing that we just put in. And so then we'll go on ahead and over here in our CSS, our tablescroll div.

[00:02:35]
We'll go on ahead and tell it to overflow-x: auto. Generally speaking, there will be a y scroll bar, but this is how you can also give it an x scroll bar.
>> Jen Kramer: All right, how is everybody doing so far? I know, not terribly exciting, but those are the basics, okay.

[00:03:02]
And so when people talk about responsive tables, usually that's as far as they get. We ready to take it to the next level? Yeah, cuz we've been having so much fun today. All right, so let's take this to the next level. You all are familiar with the display property, right?

[00:03:20]
Okay, so the display property, we say display none, things go away, right? When we display, we have display block, we have display inline, right? All these different parts of the table have their own display properties as well, right? What we'd actually like this table to do on mobile is we'd actually like to have sort of, you can think of each of these as an individual report, right?

[00:03:48]
So an apple, raw, without skin, has a weight of 110 grams. And in a one cup of slices with 4.4 milligrams per measure of vitamin C, and 0.7 of vitamin K, right? Wouldn't that be great if we could just sort of make that as a little report, that you could just sort of scroll down, and read all those things?

[00:04:08]
That would be pretty awesome, okay? So that's actually the direction we're going to go here with the CSS we're gonna add next. So this is for mobile displays, so it's gonna be outside the media query. And so we're gonna start here with this table thead, tbody, th, td, and tr.

[00:04:36]
These are all going to display: block. Wow. [LAUGH] So basically, we just disabled the table, yeah? That's super useful, isn't it? [LAUGH] Okay.
>> Jen Kramer: So that's where we're gonna start it. Then the next thing we're going to do is in this thead here, we have all of these headers that are here in place, right?

[00:05:11]
Those are useful if you've actually got this in tabular format. We'd actually like to repeat those, because otherwise, we just have this string of stuff, right? We have to remember that apples, raw, without skin goes with description, and 110 goes with weight, yeah? Okay, so actually, I'm just gonna turn that off.

[00:05:34]
And I'm gonna turn it off in an accessible way because screen readers will still need it. But we're gonna repurpose all those headers. So I'm going to say my thead, tr, I'm gonna say a position of absolute, and then top of -9999 pixels and a left of -9999 pixels.

[00:06:10]
>> Jen Kramer: Okay, so at this point, our headers are completely gone. And now what we have here makes absolutely no sense whatsoever, table. You put on a 1 pixel solid, whoops, sorry, a border of 1 pixel solid black.
>> Jen Kramer: Okay.
>> Jen Kramer: And the thing, this is just gonna put a box around the whole table, all right.

[00:06:45]
It's not gonna put any borders in between the rows. You can add that border in between the rows if you want to do that. The way I usually do that is with a tr with a border bottom.
>> Jen Kramer: 1 pixel solid black, okay? So that'll give you some spacing here in between the data, makes it a little bit easier to read.

[00:07:16]
>> Jen Kramer: And then the table itself will put the border all the way around the outside. Something that people commonly will put on this, too, is a border collapse. Collapse, and the reason why is if you actually put a border on the individual table cells, you'll actually wind up with a tiny little gap in between the various individual table cells.

[00:07:36]
By putting border collapse on this, then everything will have one solid line, it'll look much nicer, okay. So that's why that line of code is there. Then the other thing we might wanna try doing is striping this. Anyone have any idea how we could actually stripe our table?

[00:07:53]
Maybe we'd wanna have a series of stripes, and some alternating color of some kind. Anyone know how we might do that?
>> Speaker 2: Odd and even.
>> Jen Kramer: Odd and even, using nth-child or nth of type, either one of those would work in this situation. So tr:nth-child, and we can just say odd, cuz we love the odd children.

[00:08:19]
Background-color of eee, a lovely shade of light grey, okay. So once again, this is just about readability. And if you want to throw some padding on those, you can too. So, for the th and the td, let's throw in a little bit of padding, okay.