Setting Table Dimensions Using Relative or Absolute Values
To control a table’s dimensions, add a width and/or a height attribute to the table’s <table> tag. You can specify table dimensions either in relative terms (using percentages) or in absolute terms (using pixel counts). For example, to draw the table using the Web browser’s entire application window, write the table’s <table> tag as follows:
<table width="100%" height="100%">
The Web browser, in turn, will change the dimensions of the table (and its cells) as necessary to take up the entire application window. In other words, the Web browser will make the table (and its cells) larger if the Web site visitor expands the size of the browser’s application window, and will make the table (and its cells) smaller when the site visitor reduces the window’s size.
If you do not want the Web browser to change the dimensions of a table based on the size of the application window, set the table’s height and width to a fixed number of pixels. For example, to have the Web browser draw a table 764 pixels wide by 558 pixels tall each time, write the <table> tag as follows:
<table width="764" height="558">
By dropping the percent sign (%) from an attribute’s value setting, you tell the Web browser to use the value as a number of pixels and not a percentage. When you specify the table’s dimensions using absolute values (in other words, when you specify the table’s width and height as a number of pixels), the Web browser will change neither the table’s dimensions, nor the dimensions of its cells when the site visitor changes the size of the Web browser’s application window. For example, given a screen resolution of 800×600 and a table width and height of 764×558, if the Web site visitor reduces the height of the Web browser’s application window, only a portion of the table will be visible onscreen. The Web browser, in turn, will add a vertical scrollbar to the application window, so that the site visitor can scroll the offscreen portion of the table into view. (Similarly, if the visitor reduces the width of the application window, Windows will display a horizontal scrollbar to allow the visitor to scroll screen contents horizontally.) Conversely, if the site visitor increases the screen resolution to 1024×768, for example, the table’s size will remain constant, and the Web browser will display white space in its application window, below and to the right of the table.
When setting the width and height attributes in a <table> tag, keep in mind that you are really setting only the table’s minimum dimensions. The content you place in a table’s cells will determine the table’s actual dimensions. Suppose, for example, that you specify a 764×558 table, with two rows of two cells each. If you place a 450×350 pixel picture into each of the cells in the first row, the Web browser will automatically expand the table’s width to 900 pixels to accommodate the width of the data in the table—that is, the two pictures in the first row. If you then add a 450×350 pixel graphics image to either of the cells in the table’s second row, the Web browser will increase the table’s height to 700 pixels to accommodate the height of the two pictures in the table’s column.