HTML Guides for width

The CSS width property contains an invalid value.

The width property accepts specific types of values: lengths (like 100px, 10em, 5rem), percentages (50%), viewport units (100vw), the keyword auto, and sizing keywords like max-content, min-content, or fit-content. The validator rejects anything that doesn't match these formats.

Common mistakes that trigger this error:

• Missing a unit: width: 100 instead of width: 100px. Plain numbers (other than 0) are not valid CSS lengths.
• Using an invalid unit or typo: width: 100 px (with a space), width: 100ppx.
• Passing a non-length value: width: red, width: bold, width: none. The keyword none works for max-width but not for width.
• Including extra characters: width: 100px;50px or width: 100px !importnt.

Invalid example

<div style="width: 600">

<p>This box has no unit on its width value.</p>

</div>

The value 600 is not valid because it lacks a CSS unit.

Fixed example

<div style="width: 600px">

<p>This box now has a valid width.</p>

</div>

Adding px (or another appropriate unit like em, %, rem, vw) makes the value valid. If the intent is to let the element size itself naturally, use width: auto 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.