How can I fill an html table data cell with a color?

Question

I am creating a timeline with an html table. I want to colorize the data cells in a row corresponding to the lifespan of the person represented in a row. That is to say, if the person lived from 1835 to 1910, all of those columns would be colorized. Those prior to 1835, and those after 1910 would not.

I currently simply have a placeholder tilde as the contents of the "year" cells:

<tr>
      <th scope="row">John Marshall Clemens</th>
      <td>Father</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>

The ultimate effect should look something like this (assuming John Marshall was alive at least from 1794 through 1797:

Answer 1

You can do it using CSS classes

.bg {
  background-color: orangered;
}

<table>
<tr>
  <th scope="row">John Marshall Clemens</th>
  <td>Father</td>
  <td class="bg">~</td>
  <td class="bg">~</td>
  <td class="bg">~</td>
  <td class="bg">~</td>
</tr>
</table>