Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The table caption seems like a simple little element, but actually it's quite difficult to style through CSS. That's because the table caption doesn't really behave like any other element. Even though it is nested inside the table just after the opening table tag, it behaves like a block level element found outside the table. Now, regardless of that little nugget, it inherits some but not all of its properties from the table itself. Well, my advice is to experiment with styling table captions thoroughly.
I mean knock yourself out. They are actually a lot of fun to play with, although the results are typically unexpected. Experimenting will give you a good idea of what works and what doesn't work. I think it's a good idea to keep your table captions fairly simple. Remember, they are designed to identify the table to the user and as such clear, straightforward styling should be the norm. So here I've got my tour_detail_ bigsur_trails.htm file opened. I'll scroll down, check out my table, and over my CSS Styles panel I've found all of those table styles we were setting earlier.
So what I want to do now is select the main table selector, so #mainContent table.data, and I'm going to add a CSS rule just after that. Now, in this case it's going to be a compound selector and I'm going to type in #mainContent table.data caption. So essentially we're just targeting caption tag that's inside of that table. I'm going to go ahead and click OK and as I mentioned before, we are going to do some fairly just basic styling here. Font-size is going to be 1.2ems, font- weight is going to be bold, color is going to be #51341a, so 51341a.
That's actually the color that we'd be giving the remainder of the subheadings on the page. I'm going to switch to the Block category and for text-align, I'm going to choose left. That will align the caption with a left edge of the table. Going to my Box category, I'm going to set margins to 0. That will zero out any default margins the browsers might have. For padding, I'm going to deselect Same for all and give it a bottom padding of 10 pixels. That should keep the caption 10 pixels away from the top of the table.
I'm going to click OK and save the file. I can see that my caption is now acting much like many of the other headings we have in here. Now, we could have changed the font to make it look exactly like these headings, but I think keeping the typography similar to the table, it helps those two items relate a little bit better. I'm going to go ahead and preview that in my browser and check out our finished table and our finished table caption. Now, if you're looking for a more thorough overview of styling table captions I recommend my Dreamweaver CSS Essential titles in the lynda.com Online Training Library where I spend a lot more time talking about styling captions.
Well, there you have it. It's an accessible style table, free of default HTML rendering and properties and designed with usability in mind. Presenting tabular data doesn't have to be boring, static or basic when striving for accessibility. Far from it, the extra structure of accessible tables gives us additional styling attributes, which we can use to make our tables engaging user experiences.
Get unlimited access to all courses for just $25/month.Become a member