Styling specific columns and rows - html

Question

I'm trying to style some specific parts of a 5x4 table that I create. It should be like this:
Every even numbered row and every odd numbered row should get a different color.
Text in the second, third, and fourth columns should be centered.
I have this table:
<table>
<caption>Some caption</caption>
<colgroup>
<col>
<col class="value">
<col class="value">
<col class="value">
</colgroup>
<thead>
<tr>
<th id="year">Year</th>
<th>1999</th>
<th>2000</th>
<th>2001</th>
</tr>
</thead>
<tbody>
<tr class="oddLine">
<td>Berlin</td>
<td>3,3</td>
<td>1,9</td>
<td>2,3</td>
</tr>
<tr class="evenLine">
<td>Hamburg</td>
<td>1,5</td>
<td>1,3</td>
<td>2,0</td>
</tr>
<tr class="oddLine">
<td>München</td>
<td>0,6</td>
<td>1,1</td>
<td>1,0</td>
</tr>
<tr class="evenLine">
<td>Frankfurt</td>
<td>1,3</td>
<td>1,6</td>
<td>1,9</td>
</tr>
</tbody>
<tfoot>
<tr class="oddLine">
<td>Total</td>
<td>6,7</td>
<td>5,9</td>
<td>7,2</td>
</tr>
</tfoot>
</table>
And I have this CSS file:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 0px 5px;
}
#year {
text-align: left;
}
.oddLine {
background-color: #DDDDDD;
}
.evenLine {
background-color: #BBBBBB;
}
.value {
text-align: center;
}
And this doesn't work. The text in the columns are not centered. What is the problem here? And is there a way to solve it (other than changing the class of all the cells that I want centered)?
P.S.: I think there's some interference with .evenLine and .oddLine classes. Because when I put "background: black" in the class "value", it changes the background color of the columns in the first row. The thing is, if I delete those two classes, text-align still doesn't work, but background attribute works perfectly. Argh...

Answer 1

Use CSS pseudo classes.
tr:nth-child(even){
background: #EEEEEE;
}
tr:nth-child(odd) {
background: #FFFFFF;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
text-align: center;
}
I actually found out about the even and odd options for this like a couple hours ago. Hope you'll be as happy to use them as I was :D
Edit: Fixed the last line from tr to td and here's a fiddle
To answer why your code isn't working, W3schools has the answer.
"Note: Firefox, Chrome, and Safari only support the span and width attributes of the colgroup element.
Add the style attribute to the tag, and let CSS take care of backgrounds, width and borders. These are the ONLY CSS properties that work with the tag."
So text-align has no effect. Colgroup is just too old. You gotta get with the times man :P