HTML Guides for align

In earlier versions of HTML, the align attribute was used directly on <td> (and other table elements like <tr> and <th>) to control horizontal alignment of cell content. Values like left, center, right, and justify were common. HTML5 made this attribute obsolete in favor of CSS, which provides a cleaner separation of content and presentation.

While most browsers still honor the align attribute for backward compatibility, relying on it is discouraged. It violates modern web standards, mixes presentational concerns into your markup, and makes styling harder to maintain. CSS offers far more flexibility — you can target cells by class, use responsive styles, or change alignment through media queries without touching your HTML.

How to fix it

1. Remove the align attribute from the <td> element.
2. Apply the CSS text-align property instead, either via an inline style attribute, a <style> block, or an external stylesheet.

The CSS text-align property accepts the same values the old attribute did: left, center, right, and justify.

For vertical alignment, the obsolete valign attribute should similarly be replaced with the CSS vertical-align property.

Examples

❌ Obsolete: using the align attribute

<table>
  <tr>
    <td align="center">Centered content</td>
    <td align="right">Right-aligned content</td>
  </tr>
</table>

✅ Fixed: using inline CSS

<table>
  <tr>
    <td style="text-align: center;">Centered content</td>
    <td style="text-align: right;">Right-aligned content</td>
  </tr>
</table>

✅ Fixed: using a stylesheet (recommended)

Using classes keeps your HTML clean and makes it easy to update styles across your entire site.

<style>
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
</style>

<table>
  <tr>
    <td class="text-center">Centered content</td>
    <td class="text-right">Right-aligned content</td>
  </tr>
</table>

✅ Fixed: applying alignment to an entire column

If every cell in a column needs the same alignment, you can target cells by position instead of adding a class to each one.

<style>
  td:nth-child(2) {
    text-align: right;
  }
</style>

<table>
  <tr>
    <td>Item</td>
    <td>$9.99</td>
  </tr>
  <tr>
    <td>Another item</td>
    <td>$14.50</td>
  </tr>
</table>

This same approach applies to <th> elements and the <tr> element, which also had an obsolete align attribute in older HTML. In all cases, replace the attribute with the CSS text-align property.