How to Center HTML Table

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.

HTML table to center

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 -->
        <th>First Name</th>
        <th>Last Name</th>

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.

    margin: auto;

Code Output:

center HTML table

Furthermore, you can also useĀ margin-leftĀ andĀ margin-rightĀ properties and set them to auto as shown below.

   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.

    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.

example of containers

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!

Leave a Reply

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