Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Often you may want to give users more information about the contents of a table or have a title that represents the table's subject. You can do that by giving the table a caption. So I'm working in the Tables file once again, but this time I've opened it up from the 05_04 directory. Now, to add a table caption you use the caption element, which seems pretty self-explanatory. This caption element that I'm going to show you guys only works for tables. That has depressed many a new web designer because they see that and they are like "oh, I'm going to start filling captions on all my images and everything else." I'm sorry; it just work for tables.
The caption always has to be in the same place, and that is directly after the opening table tag. So where you place it within the structure of your table really does matter. I'm going to go down on the line just blow the opening table tag, and I'm going to go ahead and add a caption element. And inside the caption's opening and closing tags you want to place whatever the caption of that particular table is going to be. This one is just going to say Basic table elements, and it's very descriptive of what was going on within the table. There aren't very many hard and fast rules for the caption; you can pretty much place any content inside the caption you want.
However, you want to try to be as succinct as possible. A caption really should describe the table, but think if you were writing a heading that somebody was going to scan very quickly and unable them to decide whether they wanted to redress the article. That's really what this caption is supposed to do. If I save this and preview this in a browser, you can see that just above our table, right there, there's our caption: Basic table elements. Typically the first thing that somebody does when I see this for the first time is they're like, "ooh, that looks horrible. I want to do something else with it." That's easy enough to do. Number one, you can use CSS to style your table captions, and that's my advice to you.
In terms of changing where it's position and how it looks and how it's styled, CSS or styles, that's definitely how you want to do it. However, there is no rule saying that you can't place content other than text inside of a caption. Captions can hold almost anything. If I wanted to, I could come back in and wrap that Basic table elements in, say, oh I don't know, an h1 tag. So if I save that and preview that, you can see that now we have a heading 1 there.
I want to be really, really clear about this because I don't wanted any confusion about what I'm telling you guys, in terms of dealing with the table caption. Yes, you can put any content inside of it you want. You can put headers, you can put div tags, you can put images, whatever you want inside of it. However, If you're doing that, if you're, say, wrapping this in h1 tag just because you want the caption to be larger and bold, that is the absolute wrong way to go about that. If you want to just change the visual formatting because you don't like the way it looks, that's what styles are for, and we're going to talk about the styles later in this title.
Rather, only place a header or something like that inside the caption if it makes logical sense within your page. Here's what I mean. Is that caption going to be as important as the top-level header on the page? Do you have a strategy already in place where you're saying "hey, I'm only going to use one h1 per page"? Don't contradict a strategy you've already put in place; on the other hand, if you're looking at this table and you're thinking "well, that caption really is the same level as an h3, in terms of importance with the rest of the headers on the page," if that's the case then feel free to use an h3 inside your caption.
You just want to make sure that there's a logical reason for you to use a header or some other content inside of a caption and not one just based on the way that it looks; that would be the wrong way to go about that. There will certainly be times when your table doesn't need a caption; however, you should always at least consider whether or not a caption is appropriate when you're building your tables. Again, they give users a way to quickly scan the subject of a table and maybe even a better benefit: it makes a table more accessible to those using assistive devices like screen readers.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 61331 Viewers
61 Video lessons · 93530 Viewers
82 Video lessons · 104385 Viewers
56 Video lessons · 107841 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.