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, 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 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.

HITSMONTHTOTAL INCREASE
324,497January 1998-
436,699February 1998112,172

To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the

tag. The table tag would look like the following.

Changing the style attribute in the

tag, as shown above, results in the table being centered on the web page, as shown below.

You can add parameters to the style attribute in the

tag to make the table more eye appealing. Adding padding:2px; and border-spacing:20px; adds spacing between the data points and the border to improve readability.

  • How to align text on a web page in HTML or CSS.
  • Additional help and information with HTML tables.
  • See our table page for related information and links.
  • HTML and web design help and support.
  • HTML and web design help.