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

【问题标题】：How can I fill an html table data cell with a color?如何用颜色填充 html 表格数据单元格？
【发布时间】：2020-01-02 03:22:08
【问题描述】：

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

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

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

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

【问题讨论】：

您是手动创建此表吗？或者使用一些程序来做到这一点？
@SwetankPoddar：我正在创建一个将 CSV 文件转换为 HTML 的实用程序

标签： html bootstrap-table

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

如果你不想使用 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

【讨论】：