如何创建具有按行和按列颜色显示的html表？

Question

我看过这张图片显示了一张非常漂亮的桌子：

我有html代码，可以为每条偶数行赋予颜色。每年列和子列也都有颜色。是否有办法为年份和偶数行中的单元格提供新的不同混合色，以及为图片中的年份和奇数行中的单元格提供新的不同混合颜色？ 我不想使用类似的东西：

.mixed_odd {background-color: #44ff99}
.mixed_even {background-color: #99ff99}

因为我的页面将有很多行，在某些情况下会超过200行，并且手动设置这些列的颜色需要花费大量时间。有没有一种快速的CSS方式来完成图片中的操作？

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

.beta td {
  text-align: center;
}

TH.Title {
  background-color: #A0E0A0
}

tr:nth-child(even) {
  background-color: #bbffcc;
}

.Year2016 {
  background-color: #ffff99
}

.Year2017 {
  background-color: #ccff99
}

.Year2018 {
  background-color: #ffff99
}

<TABLE class="beta" cellspacing="2" cellpadding="6" border="1">
  <TR>
    <TH class="Title" rowspan="2">code</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <TH class="Title" rowspan="2">Text</TH>
    <th class="Year2016" colspan="2">2016 Items</th>
    <th class="Year2017" colspan="2">2017 items</th>
    <th class="Year2018" colspan="2">2018 Items</th>
  </tr>

  <TR>
    <TH class="Year2016">Item 1</TH>
    <TH class="Year2016">Item 2</TH>
    <TH class="Year2017">Item 1</TH>
    <TH class="Year2017">Item 2</TH>
    <TH class="Year2018">Item 1</TH>
    <TH class="Year2018">Item 2</TH>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
  <TR>
    <TD>1</TD>
    <TD>text 1</TD>
    <TD>text 2</TD>
    <TD>text 3</TD>
    <TD>text 4</TD>
    <TD class="Year2016">5</TD>
    <TD class="Year2016">6</TD>
    <TD class="Year2017">7</TD>
    <TD class="Year2017">8</TD>
    <TD class="Year2018">9</TD>
    <TD class="Year2018">10</TD>
  </TR>
</TABLE>

Answer 1

CSS已经有针对偶数和偶数子的规则。

https://www.w3.org/Style/Examples/007/evenodd.en.html

您可以为表格设置ID并从中使用样式，因此您不必手动设置表格的每个元素的样式。假设您有一个<table id="beta">，则可以这样编写CSS：

#beta tr:nth-child(even) {color:limegreen;}
#beta tr:nth-child(odd) {color:lime;}

这将导致您的偶数行为柠檬绿，而奇数行为石灰。同样可以应用于<td>和其他。 This is another example but using lists，来自SO答案。

Answer 2

我认为您可以使用<'col>，谢谢您可以为整个列着色。

我给您提供了以下语法的链接：https://html.com/tags/col/