Last Updated on January 26, 2021 by Roshan Parihar
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.
How to 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 also 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 a table centrally aligned.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style> table.mytable-marg{ border-collapse: collapse; } table.mytable-marg td, table.mytable-marg th{ border: 1px solid #ccc; } .mytable-marg{ margin:0 auto; } </style> <table class="mytable-marg"> <tr> <th>Sr. No</th> <th>Equipment Name</th> <th>Weight(in Kg)</th> </tr> <tr> <td>1</td> <td>Laptop</td> <td>2.93</td> </tr> <tr> <td>2</td> <td>Television</td> <td>.23</td> </tr> <tr> <td>3</td> <td>LPG Cylinder</td> <td>14.56</td> </tr> <tr> <td>4</td> <td>Dining Table</td> <td>9</td> </tr> </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 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 for Alignment
If you want to make the table centrally aligned using CSS, I recommend 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<style> table.mytable-textal{ border-collapse: collapse; } table.mytable-textal td, table.mytable-textal th{ border: 1px solid #ccc; } .mydiv-tablealign{ text-align:center } </style> <div class="mydiv-tablealign"> <table class="mytable-textal"> <tr> <th>Sr. No</th> <th>Equipment Name</th> <th>Weight(in Kg)</th> </tr> <tr> <td>1</td> <td>Laptop</td> <td>2.93</td> </tr> <tr> <td>2</td> <td>Television</td> <td>.23</td> </tr> <tr> <td>3</td> <td>LPG Cylinder</td> <td>14.56</td> </tr> <tr> <td>4</td> <td>Dining Table</td> <td>9</td> </tr> </table> </div> |
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 for the alignment of the table.
You May Also Like to Read
I hope you like this post on how to center align table horizontally using CSS.
Reference
Stackoverflow Discussion on put table centrally aligned