How to Align th and td in HTML?

When working with HTML tables, one of the most common challenges is aligning <th> (table headers) and <td> (table data) properly. Perhaps you want to align text, images, or numbers to the left, center, or right, understanding how to use HTML and CSS effectively will make your tables more visually appealing and easier to read.

In this guide, we will explore various methods to align <th> and <td> elements in HTML, covering different alignment techniques and best practices.

<th> and <td> in HTML

Before diving into alignment techniques, let’s quickly understand what <th> and <td> are:

• <th> (Table Header): Represents the header cell of a table.
• <td> (Table Data): Represents a standard cell within the table.

Both elements are enclosed within <tr> (table row), forming a structured data representation.

<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Phone</td>
        <td>$500</td>
    </tr>
</table>

How to Align <th> and <td> in HTML?

1. Using the align Attribute (Deprecated)

The align attribute was commonly used in older HTML versions but is now deprecated in HTML5. It still works in some browsers but is not recommended.

<table border="1">
    <tr>
        <th align="left">Product</th>
        <th align="right">Price</th>
    </tr>
    <tr>
        <td align="center">Phone</td>
        <td align="right">$500</td>
    </tr>
</table>

2. Aligning Text with CSS text-align

The recommended approach is using CSS. The text-align property allows you to align text within <th> and <td> elements.

<style>
    th {
        text-align: left;
    }
    td {
        text-align: center;
    }
</style>

<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Phone</td>
        <td>$500</td>
    </tr>
</table>

3. Aligning Table Cells Vertically with vertical-align

If you need to align content vertically within <th> and <td>, use vertical-align.

<style>
    td, th {
        vertical-align: middle;
    }
</style>

Possible values:

• top: Aligns content to the top.
• middle: Aligns content to the center.
• bottom: Aligns content to the bottom.

4. Aligning with display: flex

Another modern way to align table content is by using CSS Flexbox.

<style>
    td {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

5. Aligning Numbers and Text Differently

Numbers in tables are typically right-aligned, while text is left-aligned.

<style>
    th, td {
        padding: 10px;
    }
    td.number {
        text-align: right;
    }
    td.text {
        text-align: left;
    }
</style>

<table border="1">
    <tr>
        <th class="text">Item</th>
        <th class="number">Price</th>
    </tr>
    <tr>
        <td class="text">Laptop</td>
        <td class="number">$1000</td>
    </tr>
</table>

6. Centering Content with margin: auto

For more control, you can use margin: auto along with display: block.

<style>
    td, th {
        display: block;
        margin: auto;
        text-align: center;
    }
</style>

FAQs About Aligning <th> and <td> in HTML

1. How do I align text inside <td> to the center?

Use CSS:

td {
    text-align: center;
}

2. How do I align table headers differently from table data?

Assign a different class to <th> and <td>:

th {
    text-align: left;
}
td {
    text-align: center;
}

3. Can I use align attribute instead of CSS?

No, the align attribute is deprecated. Use CSS text-align instead.

4. How do I align numbers to the right and text to the left in a table?

Use different CSS classes:

td.text {
    text-align: left;
}
td.number {
    text-align: right;
}

5. How do I vertically align content in a table cell?

Use vertical-align in CSS:

td {
    vertical-align: middle;
}