How to Center a Table in HTML

1. Set the margin Property to auto to Center a Table in HTML
2. Set the margin Property to Percentage Values to Center a Table in HTML

This article will introduce ways to center a table in HTML.

Set the margin Property to auto to Center a Table in HTML

The most straightforward way to center an HTML table is using the margin property and setting it to auto. This method works for centering all the block elements.

Using the auto value for the margin will take the available horizontal space equally. Consequently, the table takes a certain width, and its left and right margins are equally adjusted.

We can also set the margin property to 0px auto. Here, the 0px value is for the top and bottom margins, and the auto value is for the left and right margins.

The margin property sets a space between the adjacent elements. The property combines the four properties margin-top, margin-right, margin-bottom, and margin-left.

A single value in the margin property resembles the value for these four properties.

For example, create an HTML table with some rows and columns. Set the style attribute to margin:auto for the table tag.

To write the CSS more specifically, you can also write the properties margin-left and margin-right to auto.

Here, we have used the inline CSS to achieve the centering of a table in HTML.

Example Code:

<table border=1 style="margin:auto">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>

Set the margin Property to Percentage Values to Center a Table in HTML

We can also center a table in HTML using the percentage value in the margin property. The concept behind this approach is dividing the horizontal viewport of the screen into three sections.

They are the left margin, right margin, and the table’s width. We can set a specific width of the table in percentage.

Next, we can equally divide the remaining length of the viewport and set the left and right margin, respectively.

For example, set the following properties in the style attribute in the table tag. Set the width property to 50% and the margin-left and margin-right properties to 25%.

As a result, the table will take half of the width of the horizontal viewport of the screen. The remaining space is equally adjusted to the left and the right margins.

Thus, we can center the table in HTML.

Example Code:

<table border=1 style="width:50%;
margin-left: 25%; margin-right: 25 %;">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>