Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this video, what we're going to talk about is styling columns and you might think to yourself, hey that should be easy, there's just columns there, but if you look at html markup of tables, it's very row centric, if TR element is for table rows and TD element is for table cells, but you don't have TC elements for table columns there is a call COL element, but how that should relate to the cells and the rows is actually sort of an interesting question and for that matter, how to style columns is under some debate even as this is being recorded so we're going to fake our way around the problem. Effectively, we're going to do a little end-run using some markup tricks of our own. I'm going to open up what's on the split view this is my editor here, which will open up two Windows looking at the same document so that that way, one of them can look up the markup of the table, see, and the other one can look at the style sheet, which we're going to add to.
So let's say we want to over here, you know, post archive we want to highlight Thursdays, Thursdays are important for whatever reason and so if you look, you can see that each of these table cells and each these rows has a class based on what day of the week it is the first day of the week has a class of Sun for Sunday and the next one has a class of mon for Monday, so on, and we want to start Thursday, so we can say post-archive .thu so, any element that has a class of thu inside the post-archive area, here we go, we'll throw in a background of #686397 and that's the same.
Now, technically, I should just be able to say border 1px solid and I would pick up whatever the color is for the table cell, in fact, we can do that now. You can see that this can be a little weird though because the table heading has one color and table cells have another color. And so we get this sort of inconsistent effect. Maybe you like this, but it is sort of inconsistent. So let's give it an explicit value, which is actually the same as the background which will make it seem to sort of extend outward. The other reason to give an explicit border color is that for reasons best known only to itself, Internet Explorer for Windows, if you don't define a border color it will make them white or a very light color, whether you defined an explicit color for the table cell or not it just ignores that for some strange reason, so we will play it safe and do it like this. Now, this is great, we highlighted Thursdays, but we also highlighted the Thursday table header, the Thu at the top and maybe that's a good idea, but it kind of looks a little weird having that box stick up above the rest of the calendar so what we're going to do is actually limit these to TD elements and have a class of thu, because if you look in that thead, we have th elements, table header elements with scope of call, this is an accessibility feature that basically says any table cells that are in the same column as this table header, this the table header that goes with those table cells. It's a good accessibility thing to do if you column headers so that's something to keep in mind.
So, having done that, if we reload, we discover that hey, great, we just highlighted Thursdays and we could stop there, or we might decide that we'd actually like to help that, take a little th you visually, have a visual distinction of some type, so we'll say th.thu, th.thursday and let's give it the same color as that background. That might be interesting, so we'll do that and hit Reload and now, Thursday he has the same foreground color as the table cells and it's column has a background color. So the point here really is to demonstrate how you can use, THs, TDs, you know, separately in order to create certain effects. Now the other possibility is instead of saying td.thu, we could have said, any element with the class of thu, which is inside the table body, which is itself inside an element and in your post-archive do this and then any element with the class of thu that's inside the table head, do this, that's going to have if I hit Reload exactly the same effect. This is just a different way of learning a selector to address the same element or elements.
Again, neither of these is really better or worse than the other they're simply different ways of getting to the same end result. So that's how to do to column styling in as cross browser friendly fashion as possible.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.