Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You know I'm going to be honest with you here. Even before I started using CSS, I have always loathed the default table borders that browsers apply. Through CSS, we can leave those clunky, semi-3D borders behind and create streamlined and customized borders. Like everything else, however, table borders created with CSS have rules that we must follow in order to get the desired results. Let's dive in and add some custom borders to our table.
So, here we have the Big Sur Trails file open, and what we're going to do is again scroll-down through your styles to find your table styles. First things we're going to do is just add a border to our table, and I'll tell you what. I really want to see what this is going to look like as I'm changing these. So, I'm going to go ahead and turn Live View on and then scroll down. As we're making changes to our table over here in the styles, we should be able to see that refreshed within Live View. And of course, then I'm going to scroll back down and find my table styles again, but that's okay. They are not that hard to find.
Okay, so what I'm looking for here is the #mainContent table.data. So, I'm looking for that main table tag. I'm just going to go ahead and add a border to this, so add a property, add a border. We're going to add 1 pixel solid #333. So, a solid gray border all the way around. Don't forget to put the spaces between the properties there. Hit Return. Huh. Well, was that what you were expecting? We got the border all the way around a table. A lot of people expect the moment you do that to have all of your rows and all of your headers and all of your table cells have just neat little borders.
Well, that's not what we just told to CSS to do. We told the CSS to put a border all the way around the table and that's what it did. So, in order for us to get borders throughout our table, we're going to have to write a few more styles. Now, let's go ahead and find the #mainContent table.data th, selector right underneath it. So these are all of our table headers. I'm going to add another property to this one, and this time I'm going to add a border-bottom. So it's just a bottom border here. 1 pixel solid and it is going to be #000, so that's going to be black.
Now, as soon as we do this, watch what happens. We get a nice black border right underneath our main table header and then we get a black border separating these guys as well. So it's a nice visual separator, darker than everything else around it, and it gives us a nice contrast between the background behind these headers and the border itself. Now, we need to add borders to the remainder of our table, so I'm going to scroll over here and you may need to widen this a little bit. I'm going to find the other th tag, which is the one inside the thead tags, so we're focusing on these guys right now.
And I'm going to add a property here. I'm going to add border 1 pixel solid #333, and there is our border. And then the table data cell right underneath that. Select that, add a property here, and we're going to do border 1 pixel solid #333. So the same border for that one as well. So now our table has borders defined for table itself, all of our table cells, and all of our table header cells. You know, looking at this though it still doesn't look quite right.
These borders don't seem to line up very well and I could swear that's thicker than one pixel. Well, it is and they don't. The reason for this is that each one of these table cells has a 1 pixel border. Meaning this one does, and so does this one. One pixel plus one pixel equals two pixels. So in fact what we get here is a 2 pixel border. So how do you combat that? Well, there is actually a very, very easy method of combating that. Go back up to your main table selector, #mainContent table.data, and we're going to add one more property.
Go ahead and add a property here and I'm going to type in border-collapse and the value for this-- and I'm just going to grab the pulldown menu so that you can see the different values here. Collapse, separate and inherit. Now, separate is the default and that's what we're seeing here. That's keeping the borders separate. We want collapse so that in fact, they collapse down to a single pixel path. Now, one thing about this border- collapse property. You can only use it on tables and if you're the type of person that really likes the CSS Rule Definition dialog box, there is no border- collapse option available in this dialog box.
You have to add that either hand-coding it or through the CSS Styles panel here. Okay, our table is almost finished. We have visually identified header information and given users help in quickly scanning vertical and horizontal data. The only thing we need to do next is style an element of our table that it seems we've forgotten about. This little guy right up here, the caption, and we'll do that next.
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.