How to Center a Table In CSS & HTML [Complete Guide]

Tables are a powerful tool for organizing and presenting data on a web page. However, when it comes to styling tables, beginners often struggle with aligning them properly. One common challenge is centering a table horizontally and vertically within its container. In this comprehensive guide, we will walk you through the steps to achieve this using CSS.

1. HTML Structure

First, let’s set up the HTML structure for our table. We’ll create a simple table with some sample data:

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>
</div>

In the above code, we wrap the table inside a <div> with the class table-container. This will serve as the container for our table and help us center it.

2. CSS Styling

Now, let’s move on to the CSS part. We’ll apply some styles to the table and its container to achieve the desired centering effect.

.table-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

table {
  width: 80%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #000;
}

In the CSS code above, we set the display property of the .table-container to flex. This allows us to use flexbox properties for centering. The justify-content: center; and align-items: center; properties horizontally and vertically center the table within the container.

Additionally, we set a fixed height for the container using height: 100vh;, which ensures the table stays centered regardless of the screen size.

For the table itself, we set the width to 80% to give it some breathing space within the container. We also apply basic styles to the table cells (th and td) by adding padding and a solid border.

3. Applying the CSS

To see the centering in action, we need to link the CSS file to our HTML document. Place the following line within the <head> section:

<link rel="stylesheet" href="styles.css">

Make sure the styles.css file is in the same directory as your HTML file, or adjust the path accordingly.

4. Testing and Adjustments

Now, open your HTML file in a web browser, and you should see the table centered both horizontally and vertically within the container. If the table is not centered as expected, inspect the HTML elements using your browser’s developer tools to identify any conflicting CSS rules or missing styles.

Feel free to experiment with the CSS styles to customize the appearance of your table further. You can change colors, fonts, and dimensions to match your design preferences.

Conclusion

In this complete guide, we’ve covered the steps to center a table horizontally and vertically within its container using CSS. By applying flexbox properties to the container and adjusting the table’s dimensions, you can achieve a clean and professional table layout.

Remember, practice is key. Keep experimenting and exploring CSS to enhance your web design skills. With time and hands-on experience, you’ll become proficient at creating visually appealing and well-structured tables.

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.