ptg16476052274 LESSON 10: Building Tables
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.27 shows
the final result.FIGURE 10.27
The final Drive Belt
Deflection table.▼If you got lost at any time, the best thing you can do is pull out
your handy text editor and try it yourself, following along tag by
tag. After you’ve done it a couple of times, it becomes easier.TIP▼