Answered

Format html text color based on value

(0) Share

Report

Posted on by SimpleUser

Hi All,

i'm using the below in compose to create a html table. I want to be able to format the color of the font depending on the value. i.e. Yes = Green, No = Red, Maybe = Amber.

I'm not familiar with html/ CSS and have used an online formatter to create the code, so not sure where/ how to edit it. Can someone help on where to put whats needed please?

<style>

table.BC {

border: 1px solid #1C6EA4;

background-color: #EEF3FF;

width: 100%;

text-align: left;

}

table.BC td, table.BC th {

border: 1px solid #AAAAAA;

padding: 0px 2px;

}

table.BC tbody td {

font-size: 15px;

color: #05004F;

}

table.BC thead {

background: #0C2CA4;

border-bottom: 2px solid #000000;

}

table.BC thead th {

font-size: 20px;

font-weight: bold;

color: #000000;

text-align: center;

}

table.BC tfoot td {

font-size: 14px;

}

table.BC tfoot .links {

text-align: right;

}

table.BC tfoot .links a{

display: inline-block;

background: #1C6EA4;

color: #FFFFFF;

padding: 2px 8px;

border-radius: 5px;

}

</style>

Categories:

Building flows

I have the same question (0)

All responses (3)

Answers (1)

Geeks_D 1,169 on at

Like (0)

Report
Copy link

Link copied!

Hello
You cannot use if statement in HTML style tags
This can be done with CSS in your tag

See this tutorial for more guide
https://www.geeksforgeeks.org/if-else-condition-in-css/

Was this reply helpful? Yes No
SimpleUser 78 on at

Like (0)

Report
Copy link

Link copied!

Thank you, i'm not sure where to start with this. The full code is below and the cells in red are the ones i need the condition against.

<style>
table.BC {
border: 1px solid #1C6EA4;
background-color: #EEF3FF;
width: 100%;
text-align: left;
}
table.BC td, table.BC th {
border: 1px solid #AAAAAA;
padding: 0px 2px;
}
table.BC tbody td {
font-size: 15px;
color: #05004F;
}
table.BC thead {
background: #0C2CA4;
border-bottom: 2px solid #000000;
}
table.BC thead th {
font-size: 20px;
font-weight: bold;
color: #000000;
text-align: center;
}
table.BC tfoot td {
font-size: 14px;
}
table.BC tfoot .links {
text-align: right;
}
table.BC tfoot .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
</style>
<table class="BC">
<thead>
<tr>
<th>Question</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advisor Name:</td>
<td></td>
</tr>
<tr>
<td>Submitted by:</td>
<td></td>
</tr>
<tr>
<td>Performance period:</td>
<td></td>
</tr>
<tr>
<td>Knowledge and expertise</td>
<td></td>
</tr>
<tr>
<td>Level of professionalism displayed:</td>
<td></td>
</tr>
<tr>
<td>Can-do, supportive attitude displayed:</td>
<td></td>
</tr>
<tr>
<td>Ability to understand your needs:</td>
<td></td>
</tr>
<tr>
<td>Ability to provide you with valuable advice:</td>
<td></td>
</tr>
<tr>
<td>Ability to integrate within your organisation:</td>
<td></td>
</tr>
<tr>
<td>Overall quality of the services provided:</td>
<td></td>
</tr>
<tr>
<td>Do you consider the services provided value for money?</td>
<td></td>
</tr>
<tr>
<td>Please name an improvement you would like to see in the services provided:</td>
<td></td>
</tr>
<tr>
<td>Any other comments:</td>
<td></td>
</tr>
</tbody>
</table>

Was this reply helpful? Yes No
Verified answer

SimpleUser 78 on at

Like (0)

Report
Copy link

Link copied!

I worked out you can put an if function within the html code to help provide a style dependent on value.

The if function simply looks at the value then returns the relevant color code. Works perfectly.

Was this reply helpful? Yes No