如何用颜色填充 html 表格数据单元格？

Question

我正在创建一个带有 html 表格的时间线。我想根据一行中代表的人的寿命对一行中的数据单元格进行着色。也就是说，如果这个人生活在 1835 年到 1910 年之间，那么所有这些列都会被着色。1835 年之前和 1910 年之后的都不会。

我目前只有一个占位符波浪号作为“年份”单元格的内容：

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

最终效果应该是这样的（假设约翰马歇尔至少在 1794 年到 1797 年期间还活着：

Answer 1

您可以使用 CSS 类来完成

.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>