πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Position Caption for Tables in CSS

How to Position Caption for Tables in CSS

Ferenc Almasi β€’ 2020 November 04 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

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:

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

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

Copied to clipboard! Playground
.non-standard {
    caption-side: left; 
    caption-side: right; 
    caption-side: top-outside; 
    caption-side: bottom-outside; 
}
caption.css
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

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.