Check out a free preview of the full CSS In-Depth, v2 course:
The "Caption" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

The function, placement and styling of table captions.

Get Unlimited Access Now

Transcript from the "Caption" Lesson

[00:00:03]
>> Estelle Weyl: So captions, a caption basically specifies what the title is of the table. It should be descriptive enough to indicate to a user what's involved. It is always the first child at the table, you don't always need to include one, but it improves accessibility and there's certain things you can do with it.

[00:00:24] You can position it either on the top or on the bottom with caption side, and in Firefox you can actually position it on the left or on the right. You can style it, and it does inherit properties from the table element. It is nested within the table and will inherit.

[00:00:40] So supported in all browsers is caption slide top, and caption slide bottom. And then experimental, which is supported in Firefox, is caption side left, right, top outside, and bottom outside. And basically the outside means the caption will fit into the same width as the table. But if you would say outside it wont wrap it it will actually continue.

[00:01:05] And then in the specification is inline start and inline end. And deprecated is the actual attribute on the table which would be a line, left top right and bottom, which is actually has nothing to do with caption side, it has to do with the table itself. Okay, so here is my caption right here on the bottom.

[00:01:32]
>> Estelle Weyl: So the default is top.
>> Estelle Weyl: Or I can do bottom. That's exciting. If you wanna open it up in a Firefox, you can play with the other values. So, here I declare the caption because a caption is an element, right? And you can style it. You can style it like you would any other element, font, weight.

[00:02:01]
>> Estelle Weyl: Bold. Padding, 40 pixels. Right, you can just basically style it like anything. The thing to note basically is caption side goes underneath the table. And let's say I got rid of the color here
>> Estelle Weyl: I had put it up here, it would make the whole thing red.

[00:02:24] So it's inheriting properties that are normally inherited. So that's the caption and you learned HTML. Yes?
>> Student: If I wanted to display the caption for accessibility purposes. But I didn't want it to actually display visually, could I do display none or would that take it out of both contexts?

[00:02:44]
>> Estelle Weyl: Display none would, screen readers do not read anything that's display none.
>> Student: Okay.
>> Estelle Weyl: But you could clip it so that it takes one pixel, you could position it absolutely, I assume. So let's try positioning it absolutely
>> Estelle Weyl: It's gone. The screen reader will still read that.