HTML Guides for css

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.

In earlier versions of HTML (HTML4 and XHTML), it was common to use attributes like align="center", bgcolor="#ff0000", or border="1" directly on elements to control their appearance. HTML5 enforces a clear separation between structure (HTML) and presentation (CSS). These presentational attributes are now considered obsolete, and the HTML specification instructs authors to use CSS for all visual styling.

This matters for several reasons:

• Standards compliance: Using obsolete attributes produces invalid HTML5, which can lead to unpredictable rendering across browsers.
• Maintainability: Scattering styling across HTML attributes makes it harder to update your site’s design. CSS allows you to manage styles from a single location.
• Accessibility: Screen readers and assistive technologies work best with well-structured, standards-compliant HTML. Mixing presentation into markup can confuse these tools.
• Future-proofing: Browsers may eventually drop support for obsolete attributes entirely, breaking your layout.

To fix this issue, identify the obsolete attribute in your HTML, determine the equivalent CSS property, remove the attribute, and apply the CSS rule using a style attribute, an internal <style> block, or an external stylesheet.

Here is a reference of common obsolete attributes and their CSS equivalents:

Examples

Obsolete align on a paragraph

❌ Incorrect: Using the obsolete align attribute on a <p> element.

<p align="center">Welcome to my site.</p>

✅ Fixed: Use the CSS text-align property instead.

<p style="text-align: center;">Welcome to my site.</p>

Obsolete bgcolor on a table

❌ Incorrect: Using bgcolor on a <table> element.

<table bgcolor="#f0f0f0">
  <tr>
    <td>Data</td>
  </tr>
</table>

✅ Fixed: Use background-color in CSS.

<table style="background-color: #f0f0f0;">
  <tr>
    <td>Data</td>
  </tr>
</table>

Obsolete cellpadding and cellspacing on a table

❌ Incorrect: Using cellpadding and cellspacing attributes.

<table cellpadding="10" cellspacing="5">
  <tr>
    <td>Item</td>
    <td>Price</td>
  </tr>
</table>

✅ Fixed: Use border-spacing on the table and padding on the cells.

<table style="border-spacing: 5px;">
  <tr>
    <td style="padding: 10px;">Item</td>
    <td style="padding: 10px;">Price</td>
  </tr>
</table>

Obsolete width on an image

❌ Incorrect (in some contexts): Note that width and height on <img> elements are actually not obsolete — they are valid in HTML5 and recommended for layout stability. However, these attributes are obsolete on elements like <table>, <td>, <th>, and <hr>.

<table width="600">
  <tr>
    <td>Content</td>
  </tr>
</table>

✅ Fixed: Apply width via CSS.

<table style="width: 600px;">
  <tr>
    <td>Content</td>
  </tr>
</table>

Using an external stylesheet (preferred approach)

For maintainability, move styles out of inline style attributes and into a stylesheet.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
  <style>
    .data-table {
      width: 600px;
      background-color: #f0f0f0;
      border-spacing: 5px;
    }
    .data-table td {
      padding: 10px;
    }
  </style>
</head>
<body>
  <table class="data-table">
    <tr>
      <td>Item</td>
      <td>Price</td>
    </tr>
  </table>
</body>
</html>

This approach keeps your HTML clean and semantic while giving you full control over presentation through CSS.