HTML | width Attribute

The width attribute is used in HTML to specify the width of an element, which can be a table column, an image, or an input field.

Syntax

The width attribute is added to the opening tag of an element, followed by the desired width in pixels or as a percentage of the parent element.

For a table column:

<th width="value">Column name</th>

For an image:

<img src="image.jpg" alt="Description" width="value">

For an input field:

<input type="text" name="username" width="value">

Values

The width attribute supports the following values:

• A positive integer representing the width in pixels. For example, width="300" sets the width to 300 pixels.
• A percentage value relative to the width of the parent element. For example, width="50%" sets the width to 50% of the parent element.

Notes

• It is recommended to use CSS for layout and styling, rather than inline attributes like width. However, the width attribute can be useful in certain situations, such as when creating HTML emails that do not support stylesheets.
• When using percentage values, keep in mind that the actual width may vary depending on the screen size and resolution of the viewer's device.
• For images, it is important to set the height attribute as well to ensure proper aspect ratio and prevent distortion.
• In HTML5, the width attribute is not valid for the input element. Instead, use CSS to set the width.

Conclusion

The width attribute is a simple but useful tool for controlling the width of HTML elements. It can be used for table columns, images, and input fields, and supports both pixel and percentage values. While CSS is generally preferred for layout and styling, the width attribute can sometimes be a helpful supplement.