How to Align a Table in CSS (Complete Guide)

Aligning a table in CSS is an essential skill when designing web pages. Whether you need to center a table, align it to the left or right, or adjust the content inside the table, CSS provides multiple ways to control alignment.

In this blog, you’ll learn:

✅ How to center a table horizontally and vertically
✅ How to align a table to the left or right
✅ How to align table content (text and images)
✅ Best practices for table alignment in CSS

1. How to Center a Table Horizontally

By default, a table is left-aligned in a webpage. To center it horizontally, use margin: auto; along with display: table;.

Example 1: Centering a Table Horizontally

.center-table {
    margin: 0 auto;
    display: table;
    border: 2px solid #333;
    border-collapse: collapse;
    width: 50%;
}

<table class="center-table">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

✅ Why this works?

• margin: 0 auto; centers the table horizontally.
• display: table; ensures the element behaves as a table.

---

2. How to Center a Table Vertically

To center a table vertically, use flexbox with align-items: center; and justify-content: center;.

Example 2: Centering a Table Vertically and Horizontally

.table-container {
    display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;  /* Centers vertically */
    height: 100vh;  /* Full viewport height */
}

<div class="table-container">
    <table class="center-table">
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Phone</td>
            <td>$500</td>
        </tr>
    </table>
</div>

✅ Why this works?

• display: flex; enables flexible alignment.
• justify-content: center; centers the table horizontally.
• align-items: center; centers the table vertically.
• height: 100vh; ensures the container fills the screen height.

---

3. How to Align a Table to the Left or Right

To align a table to the left or right, use the float property or text-align.

Example 3: Left and Right Table Alignment

.left-table {
    float: left;
    margin-right: 20px;
}

.right-table {
    float: right;
    margin-left: 20px;
}

<table class="left-table">
    <tr><th>Left Aligned</th></tr>
    <tr><td>Content</td></tr>
</table>

<table class="right-table">
    <tr><th>Right Aligned</th></tr>
    <tr><td>Content</td></tr>
</table>

✅ Why this works?

• float: left; moves the table to the left.
• float: right; moves the table to the right.
• margin prevents tables from sticking to other elements.

---

4. How to Align Text Inside a Table

To align text inside table cells, use:

• text-align: left; (default)
• text-align: center; (centers text horizontally)
• text-align: right; (aligns text to the right)

Example 4: Aligning Table Text

th, td {
    padding: 10px;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

<table border="1">
    <tr>
        <th class="text-left">Left</th>
        <th class="text-center">Center</th>
        <th class="text-right">Right</th>
    </tr>
    <tr>
        <td class="text-left">Item 1</td>
        <td class="text-center">Item 2</td>
        <td class="text-right">Item 3</td>
    </tr>
</table>

✅ Why this works?

• text-align: left; aligns text to the left.
• text-align: center; centers text in each cell.
• text-align: right; aligns text to the right.

---

5. How to Align Images Inside a Table

If a table contains images, you can align them using text-align or vertical-align.

Example 5: Aligning Images in a Table

.img-center {
    text-align: center;
}

.img-right {
    text-align: right;
}

.img-middle img {
    vertical-align: middle;
}

<table border="1">
    <tr>
        <td class="img-center"><img src="image.jpg" width="50"></td>
        <td class="img-right"><img src="image.jpg" width="50"></td>
        <td class="img-middle"><img src="image.jpg" width="50"></td>
    </tr>
</table>

✅ Why this works?

• text-align: center; centers images horizontally.
• vertical-align: middle; aligns images vertically inside the cell.

---

6. Best Practices for Table Alignment

✅ Use margin: auto; for horizontal centering.
✅ Use flexbox (display: flex;) for full vertical and horizontal centering.
✅ Use float (float: left; or float: right;) for positioning tables side by side.
✅ Use text-align and vertical-align for text and image alignment inside table cells.
✅ Keep tables responsive by using percentage widths (width: 80%) instead of fixed pixel sizes.

---

Conclusion

Aligning a table in CSS is simple once you understand the right techniques. Whether you need to center a table, align it to the left or right, or adjust content inside the table, CSS provides flexible solutions.

By using display: flex;, margin: auto;, and text-align, you can ensure that tables align properly in your web design.