Results 1 to 5 of 5

Thread: table styling

  1. #1
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default table styling

    is there a way to use table tr td to show different color textdepending on what the td has in it?

    example:

    <td>W</td> would show red text color(or any color of your choosing)<td>W</td>
    and
    <td>L</td> would show text color of blue(or any color of your choosing)<td>L</td>

    there will be quite a few of each on a ldeger and instead of doing inline styling this would save me a bit of typing

    Thanks in advance
    Thanks,

    Bud

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    You can't do it with CSS, but you can with JavaScript http://stackoverflow.com/questions/8...-cell-contents
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    ajfmrf (09-16-2015)

  4. #3
    Join Date
    Dec 2008
    Location
    Selby, North Yorkshire
    Posts
    90
    Thanks
    28
    Thanked 2 Times in 2 Posts

    Default

    You can change the background colour using CSS if that helps.

    Mark up:

    Code:
    	  <tr class='yellow'><td>The Water Wheel Project</td><td>John Munday &amp; John Parker</td><td>May 2015</td></tr>    
    	  <tr class='blue'><td>Race Night 2015</td><td>Rod Rayner</td><td>April 2015</td></tr>
    CSS:

    Code:
    table tr.yellow td{
    	background: rgb(255,254,245); /* Old browsers */
    	background: -moz-linear-gradient(top,  rgba(255,254,245,1) 0%, rgba(249,240,173,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,254,245,1)), color-stop(100%,rgba(249,240,173,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  rgba(255,254,245,1) 0%,rgba(249,240,173,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  rgba(255,254,245,1) 0%,rgba(249,240,173,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  rgba(255,254,245,1) 0%,rgba(249,240,173,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom,  rgba(255,254,245,1) 0%,rgba(249,240,173,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef5', endColorstr='#f9f0ad',GradientType=0 ); /* IE6-9 */
    }
    
    table tr.blue td{
    	background: rgb(245,251,255); /* Old browsers */
    	background: -moz-linear-gradient(top,  rgba(245,251,255,1) 0%, rgba(219,241,255,1) 47%, rgba(191,230,255,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,251,255,1)), color-stop(47%,rgba(219,241,255,1)), color-stop(100%,rgba(191,230,255,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  rgba(245,251,255,1) 0%,rgba(219,241,255,1) 47%,rgba(191,230,255,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  rgba(245,251,255,1) 0%,rgba(219,241,255,1) 47%,rgba(191,230,255,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  rgba(245,251,255,1) 0%,rgba(219,241,255,1) 47%,rgba(191,230,255,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom,  rgba(245,251,255,1) 0%,rgba(219,241,255,1) 47%,rgba(191,230,255,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5fbff', endColorstr='#bfe6ff',GradientType=0 ); /* IE6-9 */
    }
    The two smileys should be typed as a colon and uppercase D.
    Last edited by james438; 09-16-2015 at 05:53 AM. Reason: Formatting; James438: more formatting :)

  5. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    I used the least work example I found from your link Beverleyh and it is a jquery script.I have never used jquery like that for anything.It is interesting.Thanks again.
    Thanks,

    Bud

  6. #5
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    BorderTerroir,thanks for trying to answer my question but I was looking to control the font color of a letter in the td.not the background color.Good tip though
    Thanks,

    Bud

Similar Threads

  1. Styling controls table in Swiss Army Slideshow
    By cathcane in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-30-2012, 02:12 PM
  2. csv to html table and styling
    By ddellostritto in forum PHP
    Replies: 5
    Last Post: 05-16-2010, 08:53 AM
  3. CSS Styling A PHP Generated Table
    By tomyknoker in forum PHP
    Replies: 4
    Last Post: 04-04-2007, 02:24 PM
  4. Styling My Table Using CSS
    By tomyknoker in forum CSS
    Replies: 1
    Last Post: 04-03-2007, 11:56 PM
  5. Help with table styling
    By Dillbertdabomb in forum CSS
    Replies: 0
    Last Post: 10-04-2006, 04:22 PM

Bookmarks

Posting Permissions

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