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

(singke) #1
ptg16476052

260 LESSON 10: Building Tables


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
width:

Input ▼
<table border="1" style="width:80%;">
<caption>Vital Statistics</caption>
<tr>
<th width="40%">Name</th>
<th width="20%">Height</th>
<th width="20%">Weight</th>
<th width="20%">Eye Color</th>
</tr>
</table>

Output ▼


If you are going to specify cell widths, make sure to specify the widths for cells only on
one row or to the same values for every row. If you specify more than one value for the
width of a column (by specifying different values on multiple rows of a table), there’s no
good way to predict which one the browser will use.

Table and Cell Color


After you have your basic table layout with rows, headings, and data, you can start refin-
ing how that table looks. You can refine tables in a couple of ways. One way is to add
color to borders and cells.

FIGURE 10.14
A modified table
with manually set
column widths.
Free download pdf