Styling Tables - Beginning CSS3 - page 332

The first three are self-explanatory, but baseline needs a little explanation. Setting vertical-align to
baseline aligns the first line of content with the baseline of the tallest similarly aligned content in the same row.
The meaning should become clear from Figure 14-24 , which shows the effect of using baseline for the fourth
and fifth columns in vertical-align.html. The baseline of the smaller text in the fourth column is aligned with the
baseline of the larger text in the next column.
Figure 14-24. There are four options for vertical alignment in table cells
The baseline value affects only the first line of content in a cell, and is determined independently
for each row.
That covers the theoretical side of styling tables with CSS. To end this chapter, let's put that knowledge
to practical use by styling a data table.
exerCise: styling a Weather Chart
in this exercise, you'll add some styles to a table containing weather data. Some of the selectors are
supported only by modern browsers, but the styles still improve the look of the table even in iE 8 and older
browsers. Use as your starting point weather_begin.html and styles/weather_begin.css in the ch14 folder.
The finished table is in weather_end.html and styles/weather_end.css. listing 14-1 shows the HTMl
markup for the first two rows of the table.
Listing 14-1. Weather Data Table
<table>
<caption>
Average Weather in Southern England, 1971&#8211;2000
</caption>
<tr>
<th></th>
<th>Max Temp<br>
[°C]</th>
<th>Min Temp<br>
[°C]</th>
<th>Days of<br>
Air Frost</th>
<th>Sunshine<br>
[hours]</th>
<th>Rainfall<br>
[mm]</th>
<th>Rain >= 1mm [days]</th>
</tr>