You’re offline. This is a read only version of the page.
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>
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.
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>
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/
#1
WarrenBelz
146,660
Most Valuable Professional
#2
RandyHayes
76,287
Super User 2024 Season 1
#3
Pstork1
65,999
Most Valuable Professional
Share
Report
All responses (
Answers (