Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When we structured our table, we added column groups to identify the information contained within a specific column. In addition to making our table more accessible, it is now also giving us styling hooks that we can use to style the individual columns. This can help users scan the data quickly and make the table more readable on the screen. In using column groups for styling, you need to be aware that older browsers offer varying degrees of support for colgroup styling. Thankfully almost all modern standards compliant browsers support it, so you can style with it in confidence.
So here I have the bigsur_trails file open and we are going to pick up right where we left off. Our headers have been styled but the table, well, not so much. As a matter of fact, if we turn on Live View, you can see exactly what I am talking about. Just sort of white plain, nothing going on here, okay so we need to fix that. Once again, I am going to collapse my Files panel. Scroll down so I can see my table a little bit better. And I am going to scroll down until I find my table styles and again they are right here right above the spotlight style.
So those are the styles that we have been creating. Now, the first thing we are going to do is just apply an overall background color for our table. So I am going to go back to my main table selector. mainContent table.data. I am going to go ahead and add a property to that and I am going to add the background property. And I am going go ahead and give that a background color of #e1d8b9. So #eld8b9. I am going to hit Return, you will see that sort of sand accent color that we have been using throughout the site.
Okay, now I want to create some alternating columns here and I am going to do that by taking advantage of the colgroups that we have made. Now, if you remember, and just to jog your memory I will switch over to Split screen view for just a moment, if I go up, scroll through our tables, we can see that we have one, two, three, four, five, six columns within our column group. Trail Name, Trail Type, Length, Path, Elevation, and Rating. Well, we can take advantage of that by making alternating columns a different color than the background of our table.
Since they are sitting on the top of the table, their background color will override the background of the table, giving us alternating columns. It's also going to make it a lot easier to scan and read the data in our table. Now, to do this, we are going to have to create an entirely new rule. So I am going to go ahead and select the last rule of our table styling, which is the #mainContent table.data td, and I am going to add a brand new CSS rule. Now this one is indeed going to be a compound selector and it's going to be a grouped selector.
So we are going to type in #mainContent #trailType. trailType is one of the columns. I am going to type in a comma and then we are going to do #mainContent #trailPath, another comma, and then one more #mainContent #trailRating. So that's going to be three columns that are going to have whatever styling we have applied to them.
So I am going to go ahead and click OK and we are going to do a very simply style here. Just go to Background. Give it a background-color of #fff, which of course is white. As soon as I click OK, I will do a Save All. Once again, Dreamweaver's Design View is not a great job of previewing this so we are just going to click on Live View, scroll down, and we can see our alternating columns and text. Now, this gives us clear styling and distinction between the table data and the headers.
And it makes reading the table data a little bit easier especially when scanning vertically. By styling the column groups, we make wider and longer tables easier for the user to read and access the column data. We are of course not quite finished. While we have assisted people in helping access the vertical data from the table, we now need to turn our attention to helping access the horizontal data. We will tackle this by creating some custom borders to give added division and structure to our data.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66525 Viewers
61 Video lessons · 96931 Viewers
56 Video lessons · 110616 Viewers
82 Video lessons · 105190 Viewers
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.