Thank you all for the awesome feedback. Candidly, most of it is totally over my head, but I will continue to play around a bit and circle back with questions. I don't really understand the CSS variables, hidden controllers, or selectors, but I'll try to read more on it throughout the day.
My initial thought process was to use <span> to represent the numerical values so that they couldn't be changed on the sheet, only through the attributes. Since these values are static, I don't want players accidentally adjusting them. However, if this is limiting my functionality, I will definitely switch over to <input>.
I'll also play around with CSS Flexbox and Grids a bit more so that I can better implement the tables.
Visually, here's the effect I'm trying to produce:

As you'll see in the HTML snippet pasted below, I've created this using an attribute for each cell. Unfortunately, the only way I've found to color code the cells is to use a CSS class within the <td> tag, which would prevent me from dynamically changing individual sheets based on a called attribute. Ideally, I'd like for the attribute and attribute_max to define the numerical value and the color. For example, on this character, attr_move1 would have an input of 8 and an attr_move1_max of "gray".
HTML
This section sets the rules for cell spacing, font style, font position, and font weight. It also holds the little icons that sit at the front of each row.
<table cellspacing="0" border="0" cellpadding="0" class="units_dial">
<tbody><tr>
<td>
<table cellspacing="1" border="0" cellpadding="1" width="20" class="icons">
<tbody><tr><td><img src="https://i.imgur.com/jA9soaU.gif"></td></tr>
<tr><td><img src="https://i.imgur.com/5ymwZlG.gif"></td></tr>
<tr><td><img src="https://i.imgur.com/PFyhNhC.gif"></td></tr>
<tr><td><img src="https://i.imgur.com/cNs6uvx.gif"></td></tr>
<tr><td style="background:white; font-size:8px; color:green;">SLOT</td></tr>
</tbody></table>
</td>
This section holds the data values.
<td bgcolor="#FFFFFF" style="color: #000000;">
<table cellspacing="1" border="0" cellpadding="1" style="border-left:2px solid #00AA00; width: 26px;">
<tbody><tr>
<td class="gray"><span name="attr_move_1" type="text"/></td>
</tr>
<tr>
<td class="pink"><span name="attr_attack_1" type="text"></td>
</tr>
</tbody></table>
</td>
CSS
.sheet-pink {
background-color:pink;
}
.sheet-brown {
background-color:darkgoldenrod;
}
.sheet-black {
background-color:black;
color:white;
}
.sheet-special {
background-color:white;
border:2px solid black;
}
.sheet-gray {
background-color:darkgray;
color: white;
}
.sheet-units_dial {
text-align:center;
font:10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-weight: bold;
}
Thank you again for all of your guidance. I appreciate you taking the time.