HTML Tutorial for Width

HTML coding allows you to format the layout viewable in a user's browser. One property used to lay out the website pages is "width." The width property is used in HTML tags such as a div, table and image elements. The width is programmed in pixels, which are the tiny dots that make up the image seen on the computer screen. The width can be used to span the entire browser window, or you can create small images that take up only a small space in the website area.

Instructions

1. Open your HTML file in any text editor. HTML is a plain text language, so you can use an editor as simple as Notepad. You can also edit HTML in more advanced applications such as Dreamweaver, Visual Studio or Notepad++.

2. Place a "width" property in a table. Width is used in a table to set the size of the table across the browser horizontally. The following is an example of how to set the width of a table:

   <table width="1000px"> </table>

   This sets the table width to 1000 pixels. You can also size the table according to the width of the user's browser. This involves setting the width to a percentage. The following code sets the table width to 100 percent:

   <table width="100%"> <tr><td>The table</td></tr> </table>

   Setting the width to "100%" causes it to span across the entire browser window. If you set it to "50%," the table's width is only half of the screen.

3. Set the width of a "div" tag. Similar to a table, the width can be set in pixels or as a percentage of the screen. The following code sets the div tag width:

   <div width="200px"> The DIV tag </div>

4. Set the width of an image. In most cases, the width of an image is set according to how the designer saves the file. However, you may want to make the image smaller or larger. This can be accomplished using the "width" property. The following code sets the width of the image:

   <img src="image1.jpg" width="100px">

5. Save your HTML file and open it with a browser. Notice the div, table and image are all set to a specific width in the browser.

References

• W3 Schools: Width Property