TablesLesson 158Free preview

Center Tables

This lesson is part of How To · All levels

Summary

This lesson discusses how to center a table in the middle of a page or container. Tables are block-level elements with a certain width, so horizontal centering is done by automatic margin, rather than by text-aligned on the body. The contents of the fixed cell can be separately centered using text-aligned.

Key points

Use left-margin: auto and right-margin: auto (or margin: 0 auto) to center a fixed-leaved table
The table needs to have a width or max-width so that the margin automatically shows the effect.
Text-align: center centering the cell content, instead of moving the table to the center of the page
Wrap the table with a container that is limited in width to keep it neat on the big screen

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.