How to center table in html

HtmlHow-ToBeginner · 3 min read

How to Center a Table in HTML: Simple Methods Explained

To center a table in HTML, wrap the <table> element in a container and apply display: flex with justify-content: center, or set the table's CSS to margin-left: auto and margin-right: auto. These methods horizontally center the table inside its parent container.

📐

Syntax

You can center a table by applying CSS styles either directly on the <table> or on its container.

Using margin auto: Set margin-left: auto and margin-right: auto on the table to center it horizontally.
Using flexbox: Wrap the table in a container with display: flex and justify-content: center to center the table.

html

<!-- Using margin auto -->
<table style="margin-left: auto; margin-right: auto;">
  <!-- table content -->
</table>

<!-- Using flexbox container -->
<div style="display: flex; justify-content: center;">
  <table>
    <!-- table content -->
  </table>
</div>

💻

Example

This example shows a simple table centered horizontally using the margin: auto method. The table has a border and some padding for clarity.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Table Example</title>
  <style>
    table {
      margin-left: auto;
      margin-right: auto;
      border-collapse: collapse;
      border: 2px solid #333;
      width: 50%;
    }
    th, td {
      border: 1px solid #666;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>$1</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>$0.5</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Output

A table with two columns labeled 'Item' and 'Price' centered horizontally on the page with borders around cells.

⚠️

Common Pitfalls

Many beginners try to use the deprecated align="center" attribute on the <table>, which is not supported in HTML5. Another mistake is forgetting to set the table's display property or container styles properly, which can prevent centering.

Also, using text-align: center on the table only centers the text inside cells, not the table itself.

html

<!-- Wrong: Deprecated attribute -->
<table align="center">
  <!-- content -->
</table>

<!-- Wrong: text-align centers text, not table -->
<table style="text-align: center;">
  <!-- content -->
</table>

<!-- Right: margin auto centers table -->
<table style="margin-left: auto; margin-right: auto;">
  <!-- content -->
</table>

📊

Quick Reference

Method	CSS Code	Description
Margin Auto	margin-left: auto; margin-right: auto;	Centers table horizontally inside its container.
Flexbox Container	display: flex; justify-content: center;	Centers table by wrapping it in a flex container.
Deprecated Attribute	align="center"	Not supported in HTML5, avoid using.
Text Align	text-align: center;	Centers text inside cells, not the table itself.

✅

Key Takeaways

Use CSS margin auto on the table to center it horizontally.

Wrap the table in a flex container with justify-content center for flexible centering.

Avoid deprecated HTML attributes like align="center" for centering tables.

text-align centers cell content, not the table element itself.

Always test your table centering in different browsers for consistent results.