Setting Cell Dimensions Using Relative or Absolute Values
In addition to (or instead of) specifying a table’s dimensions by setting the table’s height and width attributes in the <table> tag, you can create a table of a specific height and width by specifying the dimensions of the table’s cells. For example, if you want to create an 800×600 table with two rows of four columns each, you can specify each cell as 200×300 pixels by writing the <td> tag for each cell as follows:
<td width="200" height="300">
(To specify the dimensions of a cell with heading data, set the width and height attributes in the heading cell’s <th> tag.)
If you specify a table’s width by setting the width attribute in the table’s <table> tag, make sure that the width of the cells in each row add up to exactly the width of the table to avoid browser-specific “strange” behavior. Each browser handles malformed tables in its own way. Therefore, if you want to control the way your table looks in every browser, do not write table HTML in which the table’s dimensions conflict with the dimensions of its cells.
Rather than set a cell’s dimensions to a fixed number of pixels, you can tell the Web browser to draw each cell as a percentage of the table’s overall width and height. Suppose, for example, that you want the Web browser to draw a table that fills the application window and has three equal-width columns. You would write the table’s HTML as follows with both a relative width (set by the value of the width attribute in the <table> tag) and relative width columns (set by the value of the width attributes in the <th> tags and <td> tags):
<table width="100%">
<tr><th width="33%" >Heading 1</th>
<th width="33%" >Heading 2</th>
<th width="33%" >Heading 3</th></tr>
<tr><td width="33%" >Column 1 Data</td>
<td width="33%" >Column 2 Data</td>
<td width="33%" >Column 3 Data</td></tr>
</table>
Or, if you want to specify a table with a fixed width and two columns that take up 80 percent of the table’s width and one that takes up 20 percent of the width, you would write the table’s HTML as follows:
<table width="600">
<tr><th width="40%" >Heading 1</th>
<th width="40%" >Heading 2</th>
<th width="20%" >Heading 3</th></tr>
<tr><td width="40%" >Column 1 Data</td>
<td width="40%" >Column 2 Data</td>
<td width="20%" >Column 3 Data</td></tr>
</table>
If you specify the widths of the table’s cells as percentages of the table’s width, make sure that the sum of the widths specified in the <th> tags (if any) and in the <td> tags for a single row does not exceed 100 percent. Should the sum of the percentages be less than 100 percent, the Web browser will split the remainder evenly among the cells in the row.
When specifying cell (or table) dimensions, you can specify a width without specifying a height, or vice versa. However, if you are specifying the dimensions of a cell as a percentage of the table’s width, make sure you set the table’s width as a number of pixels or as a percentage of the Web browser’s application window by setting the width attribute in the table’s <table> tag. Similarly, if you specify the height of the cells in the table as a percentage of the table’s overall height, be sure you set the table’s height as well. To specify the table’s height, set the height attribute in the table’s <table> tag to either a number of pixels or a percentage of the browser application window’s height.