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!
Topic: HTML
