HTML width Attribute

Introduction

The width attribute sets the horizontal size of certain HTML elements such as images, tables, and table cells. It gives you direct control over how wide an element appears in the layout.

On elements like <img>, the value is a pixel number (for example width="300"). Tables and cells can also use percentages. For full responsive control, CSS width is often used alongside or instead of the HTML attribute.

What You’ll Learn

Purpose of width

The primary purpose of the width attribute is to define how wide an element should be rendered. On images it reserves space and scales the display width; on tables it sets overall or column layout width.

Using width and height together on images helps browsers calculate layout before the image loads, reducing content jump (CLS).

📝 Syntax

Set width with a numeric pixel value or, on some elements, a percentage:

<img src="photo.jpg" alt="Photo" width="300" height="200">
<table width="80%">...</table>

Syntax Rules

• Pixel values are plain numbers: width="300", not width="300px".
• Percentages work on table, td, th, col, and related table elements.
• Pair width with height on images when possible.
• For responsive layouts, add CSS such as max-width: 100%; height: auto;.
• JavaScript: element.style.width = "200px" (CSS property).
• IDL property on img: HTMLImageElement.width (pixels as number).

💎 Values

The HTML width attribute accepts values depending on the element:

• Pixel number — Most common. width="400" means 400 pixels on img, canvas, iframe, etc.
• Percentage — On tables and cells: width="50%" is half the parent table or cell width.
• Not valid in HTML attr — Units like px, rem, vw, and em belong in CSS, not the HTML width attribute.

<!-- Image: pixels only -->
<img src="logo.png" alt="Logo" width="120">

<!-- Table: pixels or percent -->
<table width="100%">...</table>
<td width="200">Cell</td>

<!-- CSS for vw, rem, etc. -->
<div style="width: 50vw;">Viewport-based</div>

Applicable Elements

HTML width vs CSS width vs height

Examples Gallery

Size an image in pixels, set table column widths with percentages, and change width dynamically with JavaScript.

👀 Live Preview

Image rendered at 120px width via the HTML attribute:

Example

Applying width to an image element:

width.html

Copy

<img src="example.jpg" alt="Example Image" width="300">

Try It Yourself

How It Works

width="300" tells the browser to display the image 300 CSS pixels wide. Height may scale proportionally if only width is set, but specifying both width and height is best practice.

Example — table and column width

Tables accept pixel numbers or percentages:

table-width.html

Copy

<table width="80%">
  <tr>
    <th width="30%">Item</th>
    <th width="70%">Details</th>
  </tr>
</table>

Try It Yourself

How It Works

The table spans 80% of its container; column headers split that space 30/70. For modern layouts, CSS on <table> or flex/grid is often preferred, but the HTML attribute remains valid.

Dynamic Values with JavaScript

Change width at runtime using the CSS property:

dynamic-width.html

Copy

<div id="dynamicElement">Resize me</div>

<script>
  document.getElementById("dynamicElement").style.width = "200px";
</script>

Try It Yourself

How It Works

JavaScript sets the CSS width property, which accepts units like px, %, and vw. For <img>, you can also set imgElement.width = 200 (pixel number property).

♿ Accessibility

• Do not rely on width alone — Small text in a wide box or oversized images can hurt readability; test zoom levels.
• Include meaningful alt on images regardless of display size.
• Allow user scaling — Avoid fixed tiny widths that break when users enlarge text.
• Responsive images — Use srcset and sizes with CSS so content adapts on small screens.
• Tables — Prefer semantic headers; width does not replace accessible table structure.

💡 Best Practices

• Use width judiciously based on design and responsiveness goals.
• For responsive layouts, use CSS percentages, max-width, or viewport units in stylesheets.
• Test on various devices and browsers to verify sizing behavior.

🎉 Conclusion

The width attribute is a practical tool for setting horizontal size on images, tables, and other supported elements. Used correctly (plain pixel numbers or table percentages), it helps create predictable layouts.

Combine it with CSS for modern responsive design, and always distinguish between the HTML attribute syntax and the richer CSS width property.