In this tutorial, learn how to center align table horizontally in HTML using CSS. The short answer is: use the CSS margin property with 0 autoas value to align a table horizontally center.

If you have designed a table with some width less than the screen area. You may like to see the table centrally aligned. Initially, the table is left aligned by default. You have to follow the examples given below to align your table horizontally center.

Horizontally Center Align Table with CSS Margin Property

If you want to center align a table using CSS, you have to use the CSS margin property. Also, assign 0 auto as the value of the margin property in the CSS style. You can assign a class to the table to access the table HTML element.

You can increase or decrease the width of the table as per your requirement. If you use full width for the table, there is no need to make table centrally aligned.

Output

Sr. No Equipment Name Weight(in Kg)
1 Laptop 2.93
2 Television .23
3 LPG Cylinder 14.56
4 Dining Table 9

The above example showing the centrally aligned table using the CSS. The table width is 75% and there are 3 columns and 5 rows in the table. This is the only useful method using CSS to centrally align any table on your web pages.

Don’t Use CSS Text Align Property to Center Align Table

If you want to center align a table using CSS. Don’t use the CSS text-align property. The property only aligns the text horizontally center and not the table.

See the example using the text-align property. The table remains in the left aligned position with the same table.

Output

Sr. No Equipment Name Weight(in Kg)
1 Laptop 2.93
2 Television .23
3 LPG Cylinder 14.56
4 Dining Table 9

The above example showing the table with div element contains the text-align property. The output clearly shows that it’s not suitable to use for aligning table centrally. You have to use the CSS margin property to align the table horizontally center.

You may also like to read

Hope, you like this post of how to center align table horizontally using CSS. If you have any query regarding the tutorial, please comment below.

Also tell me, which method you are using to make your table centrally aligned.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.