View Full Version : Shading HTML table rows in CSS

02-13-2009, 12:22 PM

I have this dilema: I use a programme that automatically generates the HTML source code for a football league table.

It has 23 rows, one for header and 22 for the 22 teams. The first 5 rows are shown below:

<table cellspacing="0" cellpadding="2" border="1" width="550" class="ltrack">


<th width="205">Team</th>
<th width="40">P</th>
<th width="40">W</th>
<th width="40">D</th>
<th width="40">L</th>
<th width="40">F</th>
<th width="40">A</th>
<th width="40">GD</th>
<th width="65">Points</th>

<td>Ajax Skerries</td>

<td align="right">28</td>
<td align="right">15</td>
<td align="right">8</td>
<td align="right">5</td>
<td align="right">30</td>
<td align="right">16</td>

<td align="right">14</td>
<td align="right">53</td>
<td>Legoland FC</td>
<td align="right">28</td>
<td align="right">14</td>

<td align="right">9</td>
<td align="right">5</td>
<td align="right">43</td>
<td align="right">20</td>
<td align="right">23</td>
<td align="right">51</td>

<td>Legoland United</td>
<td align="right">28</td>
<td align="right">14</td>
<td align="right">8</td>
<td align="right">6</td>

<td align="right">47</td>
<td align="right">20</td>
<td align="right">27</td>
<td align="right">50</td>

<td align="right">28</td>
<td align="right">13</td>
<td align="right">10</td>
<td align="right">5</td>
<td align="right">24</td>
<td align="right">17</td>

<td align="right">7</td>
<td align="right">49</td>

My existing table CSS is

.ltrack {
font-family: "calibri";
font-size: 10pt ;
margin:1em 0 0 0; /* above left below right */

Full table as is is on http://www.minifigtimes.com/football.shtml

What I want to do is have the background colour of the bottom three rows something other than white as it should represent teams in the relegation zone.

As I will be updating the table code 1+ times a week, I am wondering whether my CSS can specify that rows 23, 22 and 21 are to have a BG colour. This would let me not have to edit the actual source HTML all the time.

Is this possible and if so how? Thanks in advance!

02-13-2009, 12:42 PM
I use a programme that automatically generates the HTML source code for a football league table. Can't you just use the same program to check the loop count and then add an extra class to those rows ?

You could use the :first-child pseudo for standard browsers, like

.ltrack tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr { /* add 23 tr */
} (http://www.quirksmode.org/css/firstchild.html)

In CSS3, there will be nth-last-child (http://reference.sitepoint.com/css/pseudoclass-nthlastchild)

02-13-2009, 01:27 PM
Thanks a million!

The first-child pseudo works a treat :)

02-13-2009, 09:29 PM
Why not simply add a different class to those last three rows?