Hi everybody. Today, we're going to talk about tables. Many people use Bootstrap for styling their tables. I find that Bootstrap is very popular for both tables and navigation menus. Because it's really easy to go from something that's ugly, to something that looks really professional. And it doesn't take much effort. However, using Bootstrap to make tables, is an example of where you may apply many classes, to a single element. When we write our own code, we tend to make classes that stand alone. I'm going to make this special class and it's going to style everything beautifully. In Bootstrap, instead you need to layer multiple classes on top of each other to get a really specific look. The table class, the class just class equals table, it's the foundation. You need to have that class every time you style tables. So let's talk about that one. The simple table class it just adds some padding and horizontal dividers. It doesn't sound like much but I'm going to show you in a few minutes and it's kind of impressive how quickly it transforms it. You can also us the class, table-striped, in addition to the table class. This stripes your table with a kind of odd and even look. Every odd row has a little bit of color, every even row is just background transparent. You can also add borders to your table where it will add a border to the tables and the cells inside the table. We can also add a hover. This adds a hovering state so as you move your mouse or whenever you access the different rows it can change the look. It's also possible to have responsive tables. It actually sounds I think a little cooler than it is. How it works is that Bootstrap sets one breakpoint for responsive tables. By default, any table that's under 768 pixels, you can scroll back and forth. It doesn't try to squish the entire table into one little screen. You just kind of scroll. But anything over 768 pixels. Well, then you're just going to get that default view. There's no default scrolling at the bottom. It's also possible to style some of the individual elements. Instead of the entire table, you can style a single cell, part of a row, or part of a header. Some of those classes include active, success, and info. You also have warning and danger. Since these are classes, I want to remind you that they do not have any semantics in it. A screen reader or anything like that, even someone searching for tags, isn't going to realize that you're trying to put a warning in there, it's just a class like any other class. So let's go ahead and look at an example. I really encourage you in this particular case to go onto CodePen and check out this Bootstrap tables code from the responsive design section. So what I've done here is I've made a very simple table. I already went in and included the link to Bootstrap style in CodePen. So now, I'm just going to add some classes so you can see how it looks. When I add table class equals table, right away you can see wow, that looks so much better, all right? You didn't have to add any of your own styling at all. And now it went from just a bunch of text to something that really does look like a table. I can add in table-striped, and before I hit that D, I want you to look at the picture, and then look again. You're going to want to look at the Ashtabula, the Fort Myers, the Tulsa. It's going to be very nuanced, but you'll be able to see that it does look a little bit different. It was actually Los Angeles and Tucson. They have a little slight bit of color to them, while before there weren't. How Bootstrap does this is it actually uses pseudo classes, and it does an odd even type approach to figure out which one should have color, and which one's don't. I'm going to add the table bordered. And actually it's just table, yeah. I always forget. I'm going to be honest. I always forget whether it's table border, or bordered. Apparently it's bordered. And once we add that you can see that it's added the lines in between. The last one I'm going to add right here is the table hover. When I save that one, again, it's a very gentle look. It's not something you see right away, but as I scroll between the different rows, there's a little bit of a hover styling effect. The next thing I want to talk to you about is the table responsive. It actually took me quite a bit of time to get this one to work, and I couldn't figure out what was going on. First, let's look at this table when I make the screen really small. Here we go, as I make it smaller and smaller it's just going to shrink everything down. I mean, there's not really much I can do for it. So I'm going to make it a little bit better and just to make things a little bit more interesting, let's add a little bit more content. That way we can see, well, maybe it didn't need to be responsive. There we go. Now I have a much bigger page. So, I'm going to save it, and I'm going to resize again. Now as you can see, it's just kind of squishing everything in smaller and smaller. Eventually, my browser gets a scrollbar at the bottom. But it's the entire browser, not just the table. So let's go back and make this bigger. If you add table responsive right here, if you do what I did and you save it and you make it smaller, still nothing happened. That's because if you want to use table responsive, you need to put this class on the parent container, all right. I'm going to go here, so I'm going to add the class equals responsive, oops, table responsive, to the div class. I'm going to save it, and now when I resize it, at first, it doesn't look very much different, but now, if I actually go to the table, you can see it now has its very own little scroll bar that I can use to go back and forth. So it won't try to squish the elements too much. It'll still make them pretty small, but you can see that if there's other information underneath, it won't be spread out as much, so I can get that scroll right up to I think I said about 768. So even here, it takes up all the space, I don't need it. But that response is just basically going to let people scroll. I'm going to get rid of some of this extra ugliness for just a second. Get it back to our old one, and then the last thing I was going to show you were some of those special classes that you can use on the elements themselves. So if I go in to this row, I can add class equals success. It basically just turned it green. Nothing too important there. If I do class equals active it's going to set it to, did I do that right? Yeah you can't even see it. It's barely even colored but it's there. You can also do danger. That's your pink. And warning. Oops that will not work. And in this one again you can see that it turns in a kind of yellowish color. I'm not a super big fan of some of these classes just because they're so nuanced and hard to even tell. Visually, I think it'd probably be best if you just wrote your own classes. But those first couple where you have the table, you have the table striped, it's really great. If you want to have more impact with your style, it's perfectly fine if you write your own rules. Or better yet, get into the habit of learning some of the Bootstrap classes. And then overwriting certain elements of them with your own style. It's a great way to get practice with both responsive design, CSS and just good coding skills.
