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>

Answer 2

我希望这对它的静态效果有所帮助。

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

Answer 3

如果您不想使用CSS，

sda7

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

但是我建议阅读并使用CSS

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

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

3 个答案: