I am facing a situation where I need to change the background color of certain cells in an HTML table based on their values. Here is an image of the table structure created using Django views and populated with data from a loop. The CSS and HTML code snippets can be found below. Essentially, I aim to have specific cell backgrounds change to different colors when the value within them meets a certain criteria. Thank you for your assistance.
<div class="table-responsive">
<table class="table" id="scores">
<thead>
<tr>
<td rowspan="3"></td>
<th colspan="3" scope="colgroup">Reasoning</th>
<th colspan="3" scope="colgroup">Executive Functions</th>
<th colspan="2" scope="colgroup">Speed</th>
<th colspan="2" scope="colgroup">Memory</th>
</tr>
<tr>
<th scope="col">Verbal</th>
<th scope="col">Spatial</th>
<th scope="col">Abstract</th>
<th scope="col">Flexible</th>
<th scope="col">Working Memory</th>
<th scope="col">Attention</th>
<th scope="col">Processing</th>
<th scope="col">Visual Motor</th>
<th scope="col">Verbal</th>
<th scope="col">Visual </th>
</tr>
</thead>
{% for i in scores %}
<tbody>
<tr>
<td>{{i.test_date}}</td>
<td>{{i.reasoning_verbal }}</td>
<td>{{i.reasoning_spatial}}</td>
<td>{{i.reasoning_abstract}}</td>
<td>{{i.executive_flexibility}}</td>
<td>{{i.executive_working_memory}}</td>
<td>{{i.executive_attention}}</td>
<td>{{i.speed_processing}}</td>
<td>{{i.speed_visual_motor}}</td>
<td>{{i.memory_verbal}}</td>
<td>{{i.memory_visual}}</td>
</tr>
</tbody>
{% endfor %}
</table>
</div>
#d6
{
background-color: rgb(1, 109, 167);
color: black;
}
#d5
{
background-color: rgb(1, 167, 164);
color: black;
}
#d4
{
background-color: rgb(154, 191, 80);
color: black;
}
#d3
{
background-color: rgb(228, 190, 36);
color: black;
}
#d2
{
background-color: rgb(214, 142, 33);
color: black;
}
#d1
{
background-color: rgb(187, 185, 182);
color: black;
}