HTML and CSS Reference
In-Depth Information
FIGURE 10.28
The table with
the data rows
included.
Now that you have all the rows and cells laid out, adjust the alignments within the cells.
The numbers should be centered, at least. Because they make up the majority of the
table, center the default alignment for each row:
<tr style=”text-align: center”>
The labels along the left side of the table (Alternator, Models with/without AC, and
Power Steering Oil Pump) look funny if they're centered, however, so left-align them
using the following code:
<
th rowspan=“2” style=”text-align: left”
>Alternator<
/th
>
<
td style=”text-align: left”
>Models without AC<
/td
>
<
td style=”text-align: left”
>Models with AC<
/td
>
<th colspan=“2” style=”text-align: left”>
Power Steering Oil Pump
</th>
I've put some line breaks in the longer headings so that the columns are a little narrower.
Because the text in the headings is pretty short to start with, I don't have to worry too
much about the table looking funny if it gets too narrow. Here are the lines I modified:
<th rowspan=“2”>
Set
<br />
deflection
<br />
of new belt
</th>
<th>
Adjust
<br />
Deflection
</th>
For one final step, you'll align the caption to the left side of the table:
<caption style=“text-align: left”>
Drive Belt Deflection
</caption>
Voilá—the final table, with everything properly laid out and aligned! Figure 10.29 shows
the final result.
