HTML Table Align – A Complete Guide with Examples and Best Practices

What is Table Alignment in HTML?

Table alignment in HTML controls how a table is positioned on a webpage and how content inside the table is aligned.

There are two main types of alignment:

  1. Table Alignment – Positions the table itself (left, center, right).
  2. Cell Content Alignment – Aligns text or elements inside table cells (left, center, right, top, middle, bottom).

Step-by-Step Guide to Aligning Tables in HTML

1. Aligning the Table (Deprecated Method)

HTML used to allow table alignment using the align attribute. However, it is deprecated in HTML5, so you should use CSS instead.

<!-- Deprecated method -->
<table border="1" align="center">
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

🔹 Output: The table is centered, but this method is outdated.

2. Aligning the Table Using CSS (Recommended)

<style>
    table {
        margin: auto; /* Centers the table */
        border: 1px solid black;
    }
</style>

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

🔹 Best Practice: Using margin: auto; centers the table properly in modern HTML.

3. Aligning Table Content Horizontally (Left, Center, Right)

You can align text inside table cells using the text-align property in CSS.

<style>
    td {
        text-align: center; /* Aligns text to the center */
    }
</style>

<table border="1">
    <tr>
        <td>Left Aligned</td>
        <td>Center Aligned</td>
        <td>Right Aligned</td>
    </tr>
    <tr>
        <td style="text-align: left;">Left</td>
        <td style="text-align: center;">Center</td>
        <td style="text-align: right;">Right</td>
    </tr>
</table>

🔹 Options for text-align:
✅ left – Aligns text to the left (default).
✅ center – Centers text.
✅ right – Aligns text to the right.

4. Aligning Table Content Vertically (Top, Middle, Bottom)

You can align table content vertically using the vertical-align property.

<style>
    td {
        height: 100px; /* Adds height for better visibility */
        vertical-align: middle; /* Aligns content vertically */
    }
</style>

<table border="1">
    <tr>
        <td style="vertical-align: top;">Top</td>
        <td style="vertical-align: middle;">Middle</td>
        <td style="vertical-align: bottom;">Bottom</td>
    </tr>
</table>

🔹 Options for vertical-align:
✅ top – Aligns content to the top of the cell.
✅ middle – Centers content vertically (default for table headers).
✅ bottom – Aligns content to the bottom of the cell.

Responsive Table Alignment for Mobile Devices

To make tables responsive, use CSS width and max-width, and ensure alignment remains intact across different screen sizes.

<style>
    table {
        width: 90%;
        max-width: 600px;
        margin: auto; /* Keeps table centered */
        border-collapse: collapse;
    }
    td {
        text-align: center; /* Centers text */
        padding: 10px;
    }
</style>

<table border="1">
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
</table>

🔹 Best Practices:
✅ Use margin: auto; to keep the table centered.
✅ Use text-align: center; to align content for better readability.

Common Mistakes to Avoid

❌ Using the align attribute – It’s deprecated in HTML5. Use CSS instead.
✅ Use margin: auto; and text-align for proper alignment.

❌ Forgetting border-collapse: collapse; – It prevents double borders when styling tables.

❌ Not specifying width for mobile-friendly design.