HTML and CSS Reference
percentage 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 regard-
less 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:
<table border=“1” width=“100%”>
<caption> Vital Statistics </caption>
<th width=“40%”> Name </th>
<th width=“20%”> Height </th>
<th width=“20%”> Weight </th>
<th width=“20%”> Eye Color </th>
A table with manu-
ally set column
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
slightly, changing the width of the entire table to 80%, as shown in Figure 10.14. When
you open the new table in your browser, you'll see that the table now spans 80% of the
width of your screen. The four columns still span 40%, 20%, 20%, and 20% of the table .
To be more specific, the columns span 32%, 16%, 16%, and 16% of the entire screen