4.2 Adjustable Vs. Fixed Width In a HTML Table

In the basic table shown above, each column is wide enough to hold its content, and the total table width is the sum of all the column widths. Most of the time, you might want to specify the width of the table rather than simply letting it adjust to its contents. You use the width attribute for this, and there are two ways to do it.

• As a percentage of the browser window width. The table will grow or shrink to fill the specified percent of the window.
• As a number of pixels. The table will always display at the same fixed width regardless of the window size. Depending on the window size, the table may extend past the edge.

To specify width as a percent, use a number followed by the % sign. To specify a pixel width, use a number alone. Example:

<table width=75%>
<table width=500>

Go ahead and try it by putting the following code in place of the code used in the last post example:

<table width=500 border=”1”>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

See the different output: