Center-align a HTML table
Want your HTML table to appear neatly centered on the page? Learn the different ways to horizontally center-align a table using simple HTML or CSS techniques for clean, professional-looking layouts.
To center-align an HTML table, you have a couple of easy and effective options, depending on whether you prefer HTML or CSS. Centering a table can enhance the visual structure of your web page and make your content look more balanced.
Method 1: Using HTML align Attribute (Not Recommended in HTML5)
Although this method works, it's outdated and not considered best practice:
Note: This method is deprecated in HTML5, so it's better to use CSS.
Method 2: Using CSS (Recommended)
This is the most modern and flexible way to center a table.
Option A: Using margin: auto
Option B: Using CSS Class
.center-table {
margin-left: auto;
margin-right: auto;
}
- Key Points:
- Always prefer CSS for layout styling over HTML attributes.
- margin: auto works only if the table has a defined width (explicitly or by content).
- You can also use text-align: center; on a parent container and display: inline-table; on the table for alternate approaches.