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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML/CSS - Changing Table Cells Color

    Hi,

    How would you change the color of a cell value in a table to red if that value is a negative number using a css?

    Sample HTML Table:

    <html>

    <head>
    </head>

    <body>

    <table border="1">
    <tr>
    <td colspan="5">
    <p align="center">TABLE TITLE</p>
    </td>
    </tr>
    <tr>
    <td >TITLE A</td>
    <td >TITLE B</td>
    <td >TITLE C</td>
    <td >TITLE D</td>
    <td >TITLE E</td>
    </tr>
    <tr>
    <td>25</td>
    <td>-25</td>
    <td>-25</td>
    <td>25</td>
    <td>25</td>
    </tr>
    <tr bgcolor="#C0C0C0">
    <td>-25</td>
    <td>25</td>
    <td>25</td>
    <td>-25</td>
    <td>-25</td>
    </tr>

    </table>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i don't think you can automatically do that with css. you could creat 2 different classes, though, for the different cells.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    FL, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, apple is right, CSS isn't able to perform if else functions to check if a number is negative or positive...
    CYWebmaster.com - See why we dot com!!
    ACJavascripts.com - Cut & Paste Javascripts!
    SimplyProgram.com - Personal Blog

  • #4
    New Coder
    Join Date
    Aug 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANKS FOR THE INPUT...I THOUGHT THIS WOULD BE THE CASE FOR CONDITIONAL CSS FORMATTING.

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    If you don't mind slightly invalid HTML, instead of <td>25</td> use <td value="25"></td>

    And then:

    td:before { content: attr(value); }
    td[value^="-"] { background: red; }
    td:not([value^="-"]) { background: green; }

    Puts positive numbers with a green bg, and negative numbers with a red one.

    This will only work in Mozilla though, if even that, due to most popular browsers not supporting this level of CSS2 and 3. (Moz will do the selectors for sure, I'm just not sure about content: attr() support)

  • #6
    New Coder
    Join Date
    Aug 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jkd Thanks


  •  

    Posting Permissions

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