How to center a table in HTML

Updated: 02/27/2019 by Computer Hope

A table is an excellent way to present a lot of information in an organized way, allowing users to understand it more easily and how the various data points relate to one another. Sales data, web page traffic, stock market trends, and student's grades are examples of information that are often presented in tables.

When adding a table to a web page using HTML, it may be more visually appealing to center it on the page. Centering text and pictures is usually done via the text-align class or through CSS, but centering a table requires a different approach. Details are provided below for how to center a table on a web page.

Centering a table in HTML

When you add a table to a web page, by default, it will be aligned to the left side of the page, as in the example below.

HITS MONTH TOTAL INCREASE
324,497 January 1998 -
436,699 February 1998 112,172

The HTML source code for the table above is the following.

<table style="border:1px solid black">
  <tr>
    <td><strong>HITS</strong></td>
    <td><strong>MONTH</strong></td>
    <td><strong>TOTAL INCREASE</strong></td>
  </tr>
  <tr>
    <td>324,497</td>
    <td>January 1998 </td>
    <td style="text-align:center">-</td>
  </tr>
    <tr>
    <td>436,699</td>
    <td>February 1998</td>
    <td style="text-align:center">112,172</td>
  </tr>
</table>

To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag. The table tag would look like the following.

<table style="border:1px solid black;margin-left:auto;margin-right:auto;">

Changing the style attribute in the <table> tag, as shown above, will result in the table being centered on the web page, as shown below.

HITS MONTH TOTAL INCREASE
324,497 January 1998 -
436,699 February 1998 112,172
Tip

You can add parameters to the style attribute in the <table> tag to make the table more eye appealing. Adding padding:2px; and border-spacing:20px; will add spacing between the data points and the border to improve readability.

Additional information