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

Building scalable and manageable stylesheets

CSS has its own nuances that can make or break your design. Here are 10 tips for CSS : best practices that can help you bring out the best from your styles.

Resources:

The caption side property in CSS

Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us

Courses

The Complete JavaScript Course 2021: From Zero to Expert!

The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one!

Jonas Schmedtmann

React - The Complete Guide (including Hooks, React Router, Redux)

Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Maximilian Schwarzmüller

The Complete Web Developer in 2021: Zero to Mastery

Learn to code and become a Web Developer in 2021 with HTML, CSS, Javascript, React, Node.js, Machine Learning & more!

Andrei Neagoie