How to Center HTML Table
Tables are a crucial aspect of HTML websites because they help us to organize the information and show it in a structured and tabular format in the form of rows and columns. However, sometimes we make a table in HTML and want to align it in the center of a web page. So, this tutorial will teach you how to center an HTML table.
Although, if you donāt know how to create a table in HTML then first you should check this tutorial aboutĀ HTML tables with examples.
The HTML table that weāre going to center in this tutorial is shown below in the image.
Now, letās see the main part.
How to Center HTML Table
CSS is the only effective way to center a table in HTML. And CSS provides more control and flexibility over table layout. For this, we use the CSSĀ marginĀ property. Letās see how.
HTML Code:
The below HTML code is for the table that weāre going to align in the center. If you want to use the same table then you can copy-paste it into theĀ <body>Ā tags of your code.
<!-- HTML Code for Table --> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>Abraham</td> <td>30</td> </tr> <tr> <td>Chris</td> <td>Evans</td> <td>29</td> </tr> <tr> <td>Tony</td> <td>Stark</td> <td>28</td> </tr> </table>
In the above code, I used theĀ <table>Ā tag to create a table in HTML. And insideĀ <table>Ā tag I usedĀ <tr>Ā tag for rows,Ā <th>Ā tag for table headings, andĀ <td>Ā tag for table cells.
CSS Code
Now, Iām going to use the CSS margin property to center the HTML table. All you have to do is just set the margin to auto for the table element.
table{ margin: auto; }
Code Output:
Furthermore, you can also useĀ margin-leftĀ andĀ margin-rightĀ properties and set them to auto as shown below.
table{ margin-left: auto; margin-right: auto; }
Also, I used some CSS to style the table to change its look. I usedĀ border,Ā border-collapse, andĀ paddingĀ property to do this. The code is given below.
table,tr,th,td{ border: 1px solid #333333; border-collapse: collapse; padding: 8px; }
Things to Remember When You Center HTML Table
Here few important things to remember are that the table container must be smaller than its parent container. And the table width must be less than 100% to align it in the center of the web page.
For example, here below in the image, there are two containers one is the table itself and the other is its parent container which is <body> of HTML in which the table is present.
When we apply the margin property to the table then it automatically aligns in the center of its parent container. But what if the table width is 100%, then it will not work because the parent container width is also 100%. And the table width should be less than its parent container to center it.
Also, read about theĀ CSS box modelĀ to clear your thoughts about the HTML containers concept that I have discussed above.
More about HTML Tables:
Thatās all. This is how to center the HTML table. Hope this tutorial solved the problem. If you have questions, feel free to leave a comment below.
Donāt forget to help others by sharing this tutorial!