Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Sizing Tables, Borders, and Cells 259

10

Column Widths

You also can apply the width property to individual cells ( or ) to indicate the
width of columns in a table. As with table widths, discussed earlier, you can make the
width property in cells an exact pixel width or a percentage (which is taken as a percent-
age of the full table width). As with table widths, using percentages rather than specific
pixel widths is a better idea because it allows your table to be displayed regardless of the
window size.

Column widths are useful when you want to have multiple columns of identical widths,
regardless of their contents (for example, for some forms of page layout).

Figure 10.13 shows your original table from Figure 10.1. This time, however, the table
spans 100% of the screen’s width. The first column is 40% of the table width, and the
remaining three columns are 20% each.

To accomplish this, the column widths are applied to the heading cells as follows:

Input ▼

Output ▼

What happens if you have a table that spans 80% of the screen, and it includes the same
header cells (40%, 20%, 20%, and 20%) as in the preceding example? Revise the code

FIGURE 10.13
A table with manu-
ally set column
widths.