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

Question

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

我目前只有一个占位符波浪号作为 "year" 单元格的内容：

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

最终效果应该是这样的（假设 John Marshall 至少从 1794 年到 1797 年还活着：

Answer 1

如果您不想使用 css,

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

https://www.w3schools.com/tags/att_td_bgcolor.asp

但我建议阅读和使用 CSS

https://www.w3schools.com/css/css_background.asp

Answer 2

您可以使用 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>

Answer 3

如果它是静态的，我希望这对您有所帮助。

.bgColor{
  background-color: #ff7f28;
  color: #ff7f28;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Relation</th>
      <th>1794</th>
      <th>1795</th>
      <th>1796</th>
      <th>1797</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jhon</td>
      <td>fater</td>
      <td colspan="4" class="bgColor">~</td>
    </tr>
    <tr>
      <td>mark</td>
      <td>self</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    <tr>
      <td>livy</td>
      <td>wife</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    </tbody>
</table>
</body>
</html>

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

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

html

bootstrap-table