Here’s a fun front-end fact: did you know that tables can have captions? Tables aren’t super common anymore unless they’re being used to display data in a clean an organized fashion (when it comes to this, tables truly can’t be beat, even though they’re not terribly mobile friendly), so you might not know about this fun feature of theirs.
First, you’ll have to implement a table caption in your HTML. A good place for the caption to go is within the table, maybe under the main <table> tag or <thead> tags. Here’s how it might look:
<table> <caption>This is my table's caption!</caption> <tr><td>I'm a cell</td><td>I'm a cell too!</td></tr> <tr><td>I'm a cell three</td><td>I'm a cell four!</td></tr> </table>
The captions location in relation to the rest of the table doesn’t necessarily have an effect on where the caption appears, however. With CSS, we can actually manipulate the position of any table caption so that it appears above or below its designated table.
We can do this using the caption-side CSS property. The property takes four values. Top (this positions the caption on top of the table), bottom (as you can probably guess, this positions the caption below the table), and initial and inherit (naturally). Use of the CSS property is pretty straightforward, but we’re still going to show you what it looks like in context anyway.
If you want to position your table caption above your table, this is what your CSS would need to look like:
caption{
caption-side: top;
}
Easy enough, right?
To position your table caption below your table, you’d just need the following snippet.
caption{
caption-side: bottom;
}
Remember, tables aren’t exactly the most mobile-friendly HTML element, so use them sparingly, and never use them to create a page structure or grid situation — that’s what divs are for. Happy coding!