Using Tables - Part 5

Previous page...

Controlling Table and Cell Sizes

In previous sections of the course, table size and column width depend on the size of the words in the table cells. The words "Tyrannosaurus Rex" appear crammed into the table because the cell and the column have stretched to accommodate the longest word. The size of each cell and of the table itself is controlled with the WIDTH attribute.

Table Width

The width of the whole table is specified using the WIDTH attribute with the TABLE tag. Width is expressed in either pixels or as a percentage. For example, the following code specifies that the table should be 75% of the width of the browser window it is being displayed in:
<TABLE WIDTH="75%">

This means that the table will always be the same size relative to the width of the window and the user will never have to scroll to see the information in the table. However, if this makes the information in the table cells squash together too much, you should specify the width in pixels. The following HTML would make a table 300 pixels wide:
<TABLE WIDTH="300">

Cell Width

Specifying the cell width in the <TD> or <TH> tag affects the whole column that the cell is in. To make the Tyrannosaurus Rex cell a little bit bigger than the text, insert the following line of HTML:
<TD WIDTH="100">Tyrannosaurus Rex</TD>

Remember!

You can use the WIDTH attribute, along with the CELLPADDING & CELLSPACING attributes, to change the sizes of your table cells so that the text does not look squashed.

Tables	Part 1	Part 2	Part 3	Part 4	Part 5