Distinguish Between Default and User Input in Sudoku HTML

I am taking my first web programming course but the instructor isn't much help. After trying to contact him for that past week I decided to look through the web for help and guidance. My question is: how can I distinguish between the programmed Sudoku numbers and the empty cells that the user needs to fill in? Preferably, I would like to make the programmed cells to have a gray background while the empty cells to have no formatting.

Currently in my css file I have this:

table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
text-align: center;
border-collapse: collapse;
}

td {
    border: 1px solid #000;
    width: 40px;
    height: 40px;
}

tr:nth-child(1) td{
    border-top-width: 3px;
}

td:nth-child(1) {
    border-left-width: 3px;
}

td:nth-child(3), td:nth-child(6), td:nth-child(9){
    border-right-width: 3px;

}

tr:nth-child(3) td, tr:nth-child(6) td, tr:nth-child(9) td{
    border-bottom-width: 3px;
}