Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    Shading HTML table rows in CSS

    Hi,

    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:

    PHP Code:
     <table cellspacing="0" cellpadding="2" border="1" width="550" class="ltrack">
        <
    tbody>

    <!-- 
    REPLACE BELOW CODE WITH NEW TABLE CODE -->

    <
    tr>
       <
    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>
    </
    tr>


    <
    tr>
       <
    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>
    </
    tr>
    <
    tr>
       <
    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>

    </
    tr>
    <
    tr>
       <
    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>
    </
    tr>
    <
    tr>
       <
    td>Republic</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>
    </
    tr>
    <
    tr
    My existing table CSS is

    PHP Code:
    .ltrack 
      
    font-family"calibri"
      
    font-size10pt 
      
    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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Code:
    .ltrack tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr { /* add 23 tr */
    background:#ccc;
    }
    (http://www.quirksmode.org/css/firstchild.html)

    In CSS3, there will be nth-last-child
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Partizan (02-13-2009)

  • #3
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks a million!

    The first-child pseudo works a treat

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Why not simply add a different class to those last three rows?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •