How to Center a Table in HTML

To center an HTML table horizontally, give it a width narrower than its container and set its left and right margins to auto. For most pages, CSS is the recommended method; use Flexbox when the surrounding layout also needs alignment, and keep the HTML align attribute for legacy code.

Center a Table Horizontally with CSS

Auto margins center a table when its used width is narrower than its containing block, leaving horizontal space for the browser to distribute. A content-sized table is not a reliable way to create that condition, so add an explicit width when you want predictable centering. The margin shorthand 0 auto sets the top and bottom margins to zero and the horizontal margins to auto; margin-inline: auto expresses the horizontal intent directly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Centered table</title>
  <style>
    table {
      width: 80%;
      margin-inline: auto;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #555;
      padding: 0.5rem;
      text-align: left;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td>$4</td></tr>
    </tbody>
  </table>
</body>
</html>

The table occupies 80% of the available body width, and the browser distributes the remaining inline space around it. Change the width to suit the content and page; on narrow screens, a wide table may need a horizontally scrollable wrapper. The same centering rule can be written as margin: 0 auto or as separate margin-left: auto and margin-right: auto declarations.

Run this JavaScript example to produce the CSS rule as text:

const rule = "table { margin-inline: auto; }";
console.log(rule);

table { margin-inline: auto; }

Center a Table with Percentage Widths

A percentage width is measured against the table’s containing block. Pair it with auto side margins to center the table, rather than assigning fixed percentage margins whose total may leave no room for the table. For example, width: 50%; margin-inline: auto; makes the table half as wide as its container and centers it. Ensure the chosen width still leaves enough room for readable cells; percentage sizing does not prevent long content from widening a table.

Center a Table with Flexbox

Use a Flexbox wrapper when centering the table is part of positioning other content in a layout, or when you also need vertical centering. Set display: flex and justify-content: center on the wrapper for horizontal alignment. Add align-items: center for vertical alignment, and give the wrapper a height or min-height so it has vertical space in which to align its child. Without a defined height or minimum height, the wrapper may be only as tall as the table, so vertical centering is not visible. In this approach the parent lays out the table; the table’s own margins are not what centers it.

Use the HTML align Attribute Only in Legacy Code

Older pages may contain <table align="center"> to center a table. The align attribute is obsolete in modern HTML authoring, so use CSS for new pages. When maintaining legacy markup, recognize the attribute’s purpose and move the presentation rule into a stylesheet as part of a planned update.