FAQ: How to change the cell color depending on the range of values in the list screen
## Answer
Use "[Server Script](/en/manual/table-management-server-script)" and "[Style](/en/manual/table-management-style)".
---
## Overview
In "[Server Script](/en/manual/table-management-server-script)", assign "Cell CSS" according to the range of "[Numerical Item](/en/manual/table-management-num)" specified on "[List Screen](/en/manual/table-grid)" and change the background color of the cell.
## Operation Procedure
1. Create a "[Table](/en/manual/table)".
1. Enable "Numeric C (NumC)" in "「List Screen Item Settings」".
1. "Create new" the following "[Server Script](/en/manual/table-management-server-script)". For "「Condition」", select "Before Row Display".
1. "Create new" the following "[Style](/en/manual/table-management-style)". For "Destination", select "List".
## Script
##### JavaScript (Server Script)
```
// If the value of number C is less than 10,000, the background will be changed to red, if it is between 20,000 and 30,000, the background will be changed to yellow, and if it is 30,000 or more, the background will be changed to blue. The background color will be specified using a style that has been set in advance.
const total = model.NumC;
if (total < 10000) {
columns.NumC.ExtendedCellCss = 'cell-blue';
} else if (total >= 10000 && total < 30000) {
columns.NumC.ExtendedCellCss = 'cell-yellow';
} else if (total >= 30000) {
columns.NumC.ExtendedCellCss = 'cell-red';
}
```
## Style
##### CSS (Style)
```
/* Total is less than 10,000 JPY */
.cell-blue {
background-color: blue;
color: white;
}
/* Total is 10,000 JPY or more, but less than 30,000 JPY */
.cell-yellow {
background-color: yellow;
color: black;
}
/* Total is over 30,000 JPY */
.cell-red {
background-color: red;
color: black;
}
```
## Related Information
<div id="ManualList"><ul><li><a href="/en/manual/table">Table Function</a><span>08.13.2024 up</span></li>
<li><a href="/en/manual/table-grid">Table Function: Record Screen Index</a><span>10.02.2024 up</span></li></ul></article>
<ul><li><a href="/en/manual/table-management-num">Manage Table: Column: Numerical Value</a><span>10.02.2024 up</span></li></ul></article>
<ul><li><a href="/en/manual/table-management-style">Table Management: Style</a><span>08.13.2024 up</span></li>
<li><a href="/en/manual/table-management-server-script">Table Management: Server Script</a><span>08.13.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
