I recently came across this image showcasing a beautifully designed table:
https://i.stack.imgur.com/6K63q.png
The current HTML code I have applies colors to every even line, including the year columns and subcolumns. Is there a way to assign unique mixed colors for the cells in year columns and even rows, as well as different mixed colors for the cells in year columns and odd rows, similar to what is shown in the image?
Manually setting colors for each column can be time-consuming, especially when dealing with pages containing over 200 rows. Is there an efficient CSS method to achieve this desired effect without having to specify individual colors?
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>