The “width” attribute on the table (or td) element is obsolete. Use CSS instead.

In earlier versions of HTML (HTML 4 and XHTML 1.0), the width attribute was a standard way to control the dimensions of tables and their cells. HTML5 marked this attribute as obsolete on table-related elements, meaning browsers may still render it, but it is no longer conforming HTML. The W3C validator will report a warning or error whenever it encounters this usage.

This matters for several reasons. First, using obsolete attributes means your markup doesn’t conform to the HTML living standard, which can cause validation failures that obscure more critical issues. Second, relying on presentational HTML attributes mixes content with presentation, making your code harder to maintain. CSS provides far more flexibility and control — you can use relative units, media queries for responsive layouts, and centralized stylesheets that apply consistently across your site. Third, while current browsers still support the obsolete width attribute, future browser versions are not guaranteed to do so.

The fix is straightforward: remove the width attribute and apply the equivalent sizing with CSS. You can use inline styles for quick fixes, but a class-based or external stylesheet approach is generally preferred for maintainability.

Examples

❌ Incorrect: using the obsolete width attribute

<table width="600">
  <tr>
    <td width="200">Name</td>
    <td width="400">Description</td>
  </tr>
</table>

This triggers the validator message: The “width” attribute on the “table” element is obsolete. Use CSS instead. — and the same for each <td>.

✅ Fixed: using inline CSS

<table style="width: 600px;">
  <tr>
    <td style="width: 200px;">Name</td>
    <td style="width: 400px;">Description</td>
  </tr>
</table>

✅ Better: using CSS classes

<style>
  .data-table {
    width: 100%;
    max-width: 600px;
  }
  .data-table .col-name {
    width: 33%;
  }
  .data-table .col-desc {
    width: 67%;
  }
</style>

<table class="data-table">
  <tr>
    <td class="col-name">Name</td>
    <td class="col-desc">Description</td>
  </tr>
</table>

Using classes keeps your HTML clean and makes it easy to adjust sizing in one place. Percentage-based widths also adapt better to different screen sizes.

❌ Incorrect: width on <col> and <colgroup>

<table>
  <colgroup width="100">
    <col width="50">
    <col width="50">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

✅ Fixed: CSS on <col> elements

<table>
  <colgroup>
    <col style="width: 50px;">
    <col style="width: 50px;">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

❌ Incorrect: width on <th>

<table>
  <tr>
    <th width="150">Header</th>
  </tr>
</table>

✅ Fixed

<table>
  <tr>
    <th style="width: 150px;">Header</th>
  </tr>
</table>

Tips for migrating

• Search your codebase for width= inside table-related tags. A regex like <(table|td|th|col|colgroup)[^>]+width= can help locate all instances.
• Convert pixel values directly — a width="200" attribute is equivalent to width: 200px in CSS.
• Consider responsive design — this is a good opportunity to switch from fixed pixel widths to percentages, em units, or other flexible values.
• Use table-layout: fixed on the <table> element if you need columns to respect exact widths rather than auto-sizing based on content.

Learn more:

MDN Reference

MDN - table element

→

MDN Reference

MDN - td element

→

MDN Reference

MDN - CSS width property

→