Center aligned table HTML CSS

In this post, I will show you multiple ways to make an HTML table center aligned using CSS. Also, I will provide additional information regarding the table later in this post.

Let’s make it center align.

Table of Contents show

Multiple ways to make a table center

I have a basic HTML markup as follows:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Bicycle</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Elephant</td>
    <td>Fire</td>
    <td>Giraffe</td>
  </tr>
  <tr>
    <td>Ice</td>
    <td>Jelly</td>
    <td>Kite</td>
  </tr>
</table>

First method

You can make the above table using just one line of CSS.

CSS

table {
  margin: 0 auto;
}

<table> is a block-level element. So you can make it center align just by adding an auto margin to the left & right sides.

Second method

In this method, I will use CSS Flexbox to make the table center. Also, I will use the above HTML markup for this example.

CSS

table {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

This CSS will also make a table center aligned.

Third method

In this example, I will use CSS Grid. However, you need a little different HTML markup to use Grid.

I will use the same HTML markup but wrap it in a container <div> as you see below.

<div class="table-container">
  <!-- previous table markup will go here -->
</div>

CSS

.table-container {
  display: grid;
  place-items: center;
}

As you see in this example, I did not write any CSS specific to the <table> and I only wrote two lines of CSS based on the container <div>.

This will also make the table center aligned.

Fourth method

In this example, I will also use CSS Grid but with different properties. I have the same HTML markup as above (once again see it below).

<div class="table-container">
  <!-- previous table markup will go here -->
</div>

CSS

.table-container {
  display: grid;
  /* optional */
  grid-template-columns: 1fr;
  /* margin: 0 auto; */
}
.table-container table {
  place-self: center;
}

The first chunk of code (.table-container) alone will not center the table within the grid container. You also need to specify how the table should be positioned within the grid cell. That’s why the table { place-self: center } comes into play.

Fifth method

Until this point, I used only CSS to make the table center aligned. However, you can also center a table only using HTML and the align attribute as you see below.

<table align="center">
 <!-- rest of the table markup will go here -->
</table>

The align attribute is used to specify the horizontal alignment of an HTML element.

Learn more about tables

Make more HTML elements center-aligned

Conclusion

Now you learned multiple ways to make an HTML table center. I used simple margin: 0 auto, CSS Flexbox & Grid for those examples.

Your table structure may be slightly different than mine. However, these processes should work for everyone.

I tried to explain & make you understand all the ways possible. Therefore, if you still have any issues or if none of these examples work for you, please don’t hesitate to reach out to me. Explain your issue in the comment and you’ll hear from me very soon.