How to center a table in HTML

A table is an excellent way to present a lot of information in an organized way. 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 (hypertext markup language), 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 (cascading style sheets), 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 adding a table to a web page, by default, it's aligned to the left side of the page or container, as shown below.

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

<table style="border:1px solid black">
  <tr>
    <td><b>HITS</b></td>
    <td><b>MONTH</b></td>
    <td><b>TOTAL INCREASE</b></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, results in the table being centered on the web page, as shown below.