change background color different text in table html

Question

i have a table in html and i need to change the color of backgrund in the i have a tow diffrent word in this normal or high for normal i need a yello bgcolor for high i need a red bgcolor i need to do this in css or javascript?

this is my simple code:

<tr>
<td class='tg-yw4l'></td>
<td class='tg-s6z2'></td>
<td class='tg-s6z2'></td>
<td class='tg-baqh' rowspan='2'></td>
<td class='tg-baqh' rowspan='2'>Normal Different</td>
</tr>

Answer 1

I would suggest to create two css classes

.red{color:red}
.yellow{color:yellow}

And when creating the table, just wrap the word in a span and add the relevant class

<span class='red'>High</span>

Answer 2

I can't understand your question exactly, but I do hope that this is helpful. this is a js sample ( In my point of view, generate by serverside is more easier )

HTML

<table>
<tr>
 <td class='tg-yw4l'></td>
 <td class='tg-s6z2'></td>
 <td class='tg-s6z2'></td>
 <td class='tg-baqh' rowspan='2'></td>
 <td class='tg-baqh bg' rowspan='2'>Normal</td>
</tr>
</table>

CSS

.red{background-color:red}
.yellow{background-color:yellow}

JS

$(document).ready( function() {

    $('.bg').each( function() {
        var $this = $(this);
        if( $this.text() == "Normal" ) {
            $this.addClass("red");
        }
    });

});

Answer 3

The easiest way I know how to do this would be to take your class and use a CSS stylesheet. Use something like this at the top of your html page to link the external stylesheet.

<link href= "file location" rel="stylesheet" type="text/css">

Then go to the stylesheet you have created and enter the name of your class after a dot and enter something like this

.classname
{
background-color:red;
}

This way you can always add more formatting to your classes. You can also look up the code to all sorts of colors online.