About

Features

Pricing

Changelog

Blog

Docs

About

Features

Pricing

How to Center a Table in HTML with CSS

Jeremy Sarchet

Full Stack Developer

The admin panel that you'll actually want to use. Try for free.

What is Basedash?

Pricing

Sign up ->

February 22, 2024

If you’re reading this you probanly want to center a table in HTML. You can do this with some CSS. This post shows you how to center a table within its containing element using CSS.

You could ship faster.

Imagine the time you'd save if you never had to build another internal tool, write a SQL report, or manage another admin panel again. Basedash is built by internal tool builders, for internal tool builders. Our mission is to change the way developers work, so you can focus on building your product.

Learn more about Basedash

Book a demo

How to center a table with CSS?

Applying CSS styles is the most efficient way to center a table. By setting the left and right margins of the table to auto, you can horizontally center it within its parent element. Additionally, centering the content within the table cells ensures a polished look.

Center the table horizontally

To horizontally center your table, you need to apply specific CSS properties. Here’s how to do it:

table {
  margin-left: auto;
  margin-right: auto;
}

These lines of CSS instruct the browser to automatically adjust the left and right margins of all <table> elements, centering them within their parent container.

Example

Consider the following example where we center a table inside a div element using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
  .center-table {
    margin-left: auto;
    margin-right: auto;
  }
</style>
</head>
<body>

<div>
  <table class="center-table" border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</div>

</body>
</html>

Centering table content

For the content within the table cells, the text-align property centers text horizontally, while vertical-align deals with vertical alignment. Apply these styles like so:

table, th, td {
  text-align: center;
  vertical-align: middle;
}

This centers the cell content horizontally and aligns it vertically in the middle, enhancing the table's overall appearance.

Click to keep reading

TOC

How to center a table with CSS?

February 22, 2024

If you’re reading this you probanly want to center a table in HTML. You can do this with some CSS. This post shows you how to center a table within its containing element using CSS.

You could ship faster.

Learn more about Basedash

Book a demo

How to center a table with CSS?

Center the table horizontally

To horizontally center your table, you need to apply specific CSS properties. Here’s how to do it:

table {
  margin-left: auto;
  margin-right: auto;
}

These lines of CSS instruct the browser to automatically adjust the left and right margins of all <table> elements, centering them within their parent container.

Example

Consider the following example where we center a table inside a div element using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
  .center-table {
    margin-left: auto;
    margin-right: auto;
  }
</style>
</head>
<body>

<div>
  <table class="center-table" border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</div>

</body>
</html>

Centering table content

For the content within the table cells, the text-align property centers text horizontally, while vertical-align deals with vertical alignment. Apply these styles like so:

table, th, td {
  text-align: center;
  vertical-align: middle;
}

This centers the cell content horizontally and aligns it vertically in the middle, enhancing the table's overall appearance.

Click to keep reading

February 22, 2024

If you’re reading this you probanly want to center a table in HTML. You can do this with some CSS. This post shows you how to center a table within its containing element using CSS.

You could ship faster.

Learn more about Basedash

Book a demo

How to center a table with CSS?

Center the table horizontally

To horizontally center your table, you need to apply specific CSS properties. Here’s how to do it:

table {
  margin-left: auto;
  margin-right: auto;
}

These lines of CSS instruct the browser to automatically adjust the left and right margins of all <table> elements, centering them within their parent container.

Example

Consider the following example where we center a table inside a div element using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
  .center-table {
    margin-left: auto;
    margin-right: auto;
  }
</style>
</head>
<body>

<div>
  <table class="center-table" border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</div>

</body>
</html>

Centering table content

For the content within the table cells, the text-align property centers text horizontally, while vertical-align deals with vertical alignment. Apply these styles like so:

table, th, td {
  text-align: center;
  vertical-align: middle;
}

This centers the cell content horizontally and aligns it vertically in the middle, enhancing the table's overall appearance.

Click to keep reading

What is Basedash?

Ship faster, worry less with Basedash

You're busy enough with product work to be weighed down building, maintaining, scoping and developing internal apps and admin panels. Forget all of that, and give your team the admin panel that you don't have to build. Launch in less time than it takes to run a standup.

Book a demo