# The “align” attribute on the “td” element is obsolete. Use CSS instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-align-attribute-on-the-td-element-is-obsolete-use-css-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

### ✅ Fixed: using inline CSS

```html
<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.

```html
<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.

```html
<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.