In loop to display fields from EF table, I want to convert boolean to empty space if False - entity-framework

Question

these 2 lines are booleans in the database, checkboxes on the add record page.
But when I display rows entered, I want to have empty space where value is False (checkbox was not checked, field in table saves False).
<td align="center">#m.IsTOTPresent</td>
<td align="center">#m.IsEColi</td>
I'm thinking there is an if conditional that would change how it looks on the webpage based on the boolean result of true or false. In my case, nothing displayed would be optimum for false, and a red "true" with a grey background would be optimum for a true result. In a perfect world, that is.

Answer 1

There are many ways to accomplish what you're asking for. Here are a couple...
1. Mostly razor
CSS:
.myTrue {
background-color: red;
color: white;
};
.myFalse {
background-color: white;
color: black;
};
Markup/Razor:
<td align='center' class='#(m.IsTOTPresent ? "myTrue" : "myFalse")'>#(m.IsTOTPresent ? "true" : "")</td>
<td align='center' class='#(m.IsEColi? "myTrue" : "myFalse")'>#(m.IsEColi? "true" : "")</td>
2. Mostly js
Markup/Razor:
<td align='center' data-boolean-value="#m.IsTOTPresent"></td>
<td align='center' data-boolean-value="#m.IsEColi"></td>
js:
(function() {
document.querySelectorAll('[data-boolean-value]').forEach(
function (obj, idx, arr) {
if (typeof obj.dataset.booleanValue !== 'undefined') {
if(obj.dataset.booleanValue) {
obj.innerHTML = "true";
obj.style.backgroundColor = "red";
obj.style.color = "white";
} else {
obj.innerHTML = "";
obj.style.backgroundColor = "white";
obj.style.color = "black";
}
}
});
})();