Styling specific columns and rows

Posted by hattenn on Pro Webmasters See other posts from Pro Webmasters or by hattenn
Published on 2011-11-25T00:44:10Z Indexed on 2011/11/25 2:18 UTC
Read the original article Hit count: 203

Filed under:
|
|
|

I'm trying to style some specific parts of a 5x4 table that I create. It should be like this:

  1. Every even numbered row and every odd numbered row should get a different color.
  2. 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...

© Pro Webmasters or respective owner

Related posts about html

Related posts about css