How to Position Caption for Tables in CSS

How to Position Caption for Tables in CSS

Ferenc Almasi β€’ 2020 November 04 β€’ πŸ“– 1 min read

If you ever happen to need to position caption for a table in CSS, there's a rule for that, called caption-side. No additional rules or markup is needed, just this one:

.bottom {
    caption-side: bottom;
}
caption.css
Copied to clipboard!

By default, this is set to top. It also accepts the following non-standard values:

.non-standard {
    caption-side: left; 
    caption-side: right; 
    caption-side: top-outside; 
    caption-side: bottom-outside; 
}
caption.css
Copied to clipboard!
How to position captions for tables in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended