Question

我想用html制作一个像这样的表：

<style>
BODY { color: black; background-color: white; font-family: Verdana, Arial, Helvetica; font-size: 80% }
TH { font-size: 80% }
TD { font-size: 80% }

TD.Layout { background-color: white}
TH.Title { background-color: #A0E0A0}
TD.Item { background-color: #E8E8E8}

</style>


<TABLE border ="1" cellspacing ="2" cellpadding ="6">
  <TR>
    <TH class="Title" rowspan = 2>Name</TH>
    <TH class="Title" align="center" colspan = 2>2017 statistics</TH>
    <TH class="Title" align="center" colspan = 2>2018 statistics</TH>
  </TR>
  <TR>
    <TH class="Title" align="center">Value 1</TH>
    <TH class="Title" align="center">Value 2</TH>
    <TH class="Title" align="center">Value 1</TH>
    <TH class="Title" align="center">Value 2</TH>
  </TR>
  <TR>
    <TH class="Title" align="center">John</TH>
    <TD class="Item" align="center">1</TD>
    <TD class="Item" align="center">2</TD>
    <TD class="Item" align="center">3</TD>
    <TD class="Item" align="center">4</TD>
  </TR>
  <TR>
    <TH class="Title" align="center">George</TH>
    <TD class="Item" align="center">5</TD>
    <TD class="Item" align="center">6</TD>
    <TD class="Item" align="center">7</TD>
    <TD class="Item" align="center">8</TD>
  </TR>
</TABLE>

要点是，每年会有5或6个子列，因此我想以某种方式将它们分组，以便于某人更轻松地查看表格并了解每年属于哪个子列而无需每次都查看标题。一个不错的解决方案可能是每年使用不同的边框颜色。

Answer 1

我能想到的两个简单的解决方案是：

基于年份的样式。

<style>
BODY { color: black; background-color: white; font-family: Verdana, Arial, Helvetica; font-size: 80% }
TH { font-size: 80% }
TD { font-size: 80% }

TD.Layout { background-color: white}
TH.Title { background-color: #A0E0A0}
TD.Item { background-color: #E8E8E8}

.Year2017 {background-color: #145214}
.Year2018 {background-color: #000080}

</style>


<TABLE border ="1" cellspacing ="2" cellpadding ="6">
  <TR>
    <TH class="Title" rowspan = 2>Name</TH>
    <TH class="Year2017" align="center" colspan = 2>2017 statistics</TH>
    <TH class="Year2018" align="center" colspan = 2>2018 statistics</TH>
  </TR>
  <TR>
    <TH class="Year2017" align="center">Value 1</TH>
    <TH class="Year2017" align="center">Value 2</TH>
    <TH class="Year2018" align="center">Value 1</TH>
    <TH class="Year2018" align="center">Value 2</TH>
  </TR>
  <TR>
    <TH class="Title" align="center">John</TH>
    <TD class="Year2017" align="center">1</TD>
    <TD class="Year2017" align="center">2</TD>
    <TD class="Year2018" align="center">3</TD>
    <TD class="Year2018" align="center">4</TD>
  </TR>
  <TR>
    <TH class="Title" align="center">George</TH>
    <TD class="Year2017" align="center">5</TD>
    <TD class="Year2017" align="center">6</TD>
    <TD class="Year2018" align="center">7</TD>
    <TD class="Year2018" align="center">8</TD>
  </TR>
</TABLE>

CSS工具提示。工具提示可以表示年份，因此我们不需要查看标题中的年份值。

以供参考：https://www.w3schools.com/css/css_tooltip.asp

如何创建带有子列组的html表？

1 个答案: