HTML and CSS Reference
In-Depth Information
He
re are
the tw
o class
es,
one
for ce
nter a
nd one
for
right a
lignmen
t.
.center {
text-align: center;
}
.right {
text-align: right;
}
Let's say we want the date, temperature, and
diner rating to be center-aligned. And how
about right alignment on the altitude and
population? Here's how you would do that:
<table >
<caption>
The cities I visited on my Segway'n USA travels
</caption>
<tr>
<th>
City
</th>
<th>
Date
</th>
<th>
Temperature
</th>
<th>
Altitude
</th>
<th>
Population
</th>
<th>
Diner Rating
</th>
</tr>
<tr>
<td>
Walla Walla, WA
</td>
<td class="center">
June 15th
</td>
<td class="center">
75
</td>
<td class="right">
1,204 ft
</td>
<td class="right">
29,686
</td>
<td class="center">
4/5
</td>
</tr>
<tr>
<td>
Magic City, ID
</td>
<td class="center">
June 25th
</td>
<td class="center">
74
</td>
<td class="right">
5,312 ft
</td>
<td class="right">
50
</td>
<td class="center">
3/5
</td>
</tr>
.
.
.
</table>
An
d here
you jus
t add
each
<td>
to the
appr
opriate
class!
To create alternating colors in the Magic City, Last Chance, and Why table rows with a class,
add the class=“cellcolor” attribute to the opening <tr> tags in the table rows, like this:
<tr class="cellcolor">
<td>Magic City, ID</td>
...
</tr>
