Web Page Design Boot Camp

  Home |  Basics |  Intermediate |  Advanced |  Tools |  Site Map    Subtopics:

Table & Column Widths

If just the basic tags are used, your browser will format the table based on the amount of text or the size of an image placed in a table cell. You can specify the width of a table or column by using the width= attribute in the <table> and <td> tags as shown in the following examples.

<table width="100%">
The table will use 100% of the screen width available in the browser window. (Note the percentage is enclosed in double quotes.) If you change the size of the window, the browser will automatically resize the table.
<table width=600>
The table will occupy 600 pixels of the screen width available in the browser window.
<td width="25%">
The table column will use 25% of the screen width alloted for the table. (Note the percentage is enclosed in double quotes.)
<td width=150>
The column will be 150 pixels wide.

When setting the size of a column or table, keep in mind the screen resolution of monitors on which the document will be rendered. If you format a table for a width of more than 800 pixels, the user may have to scroll horizontally to read the text which is poor web page design. It not only makes the page harder to read, but contents on the right side of the table will be truncated if then page is printed.