HTML：如何创建 Table 像本例中那样的行 Table

Question

我正在尝试使用 html 创建一个 table，其 table 行与下面显示的示例 table 完全相同。我在网上发现了一百万种不同的方法（其中许多似乎相互矛盾）。如果可能的话，我宁愿只使用 html 而不是 css。您会注意到 table 总共有 3 table 行，其中混合了粗线和细线。

这是我目前 HTML 的一个例子。一些注意事项：1) 您可以在第一个 "tr" 标记中看到我尝试在 ANOVA 标题下添加 table 行 - 这目前不起作用。 2) 你会注意到我在一个环境中工作，其中 "EQN" 标签由 Perl 编译器解析。

<div class='indent'>
<table>
<col width="140">
<col width="80">
<col width="110">
<col width="110">
<col width="110">
<col width="110">
<tr style="border-bottom thin solid">
<th align = "left">ANOVA</th>
</tr>
<tr>
<td></td>
<td align = "right"><em>df</em></td>
<td align = "left"><em>               SS</em></td>
<td align = "center"><em>               MS</em></td>
<td align = "center"><em>      F</em>-Statistic</td>
<td align = "center"><em>      p</em>-value</td>
</tr>
<tr>
<td>Regression</td>
<td align = "right"><EQN $k></td>
<td align = "right"><EQN commas($SSR)></td>
<td align = "right"><EQN commas($MSR)></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Residual</td>
<td align = "right"><EQN $dfe></td>
<td align = "right"><EQN commas($SSE)></td>
<td align = "right"><EQN commas($MSE)></td>
<td></td>
<td></td>
</tr>
<tr>
<td >Total</td>
<td align = "right"><EQN $dft></td>
<td align = "right"><EQN commas($SST)></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

为了参考起见，我的 html table 目前看起来像这样：

任何人都可以建议添加这些 table 行的代码吗？感谢任何帮助。

Answer 1

这是我为您构建的解决方案。我只是将单元格的边框设置为仅在前两行的顶部有厚度，然后在最后一行的底部有厚度，然后折叠边框，这样线条中就不会有空白。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#lineAboveThick {
    border-style: solid;
    border-width: 2px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
#lineAboveThin {
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
#lineBelowThick {
    border-style: solid;
    border-width: 2px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
table {
    border-collapse: collapse;
}
</style>
</head>
<body>
<div class='indent'>
<table>
<col width="140">
<col width="80">
<col width="110">
<col width="110">
<col width="110">
<col width="110">
<tr style="border-bottom thin solid">
<th align = "left">ANOVA</th>

</tr>
<tr>
<td id="lineAboveThick"></td>
<td id="lineAboveThick" align = "right"><em>df</em></td>
<td id="lineAboveThick" align = "left"><em>               SS</em></td>
<td id="lineAboveThick" align = "center"><em>               MS</em></td>
<td id="lineAboveThick" align = "center"><em>      F</em>-Statistic</td>
<td id="lineAboveThick" align = "center"><em>      p</em>-value</td>
</tr>
<tr>
<td id="lineAboveThin">Regression</td>
<td id="lineAboveThin" align = "right"><EQN $k></td>
<td id="lineAboveThin" align = "right"><EQN commas($SSR)></td>
<td id="lineAboveThin" align = "right"><EQN commas($MSR)></td>
<td id="lineAboveThin"></td>
<td id="lineAboveThin"></td>
</tr>
<tr>
<td>Residual</td>
<td align = "right"><EQN $dfe></td>
<td align = "right"><EQN commas($SSE)></td>
<td align = "right"><EQN commas($MSE)></td>
<td></td>
<td></td>
</tr>
<tr>
<td  id="lineBelowThick">Total</td>
<td   id="lineBelowThick" align = "right"><EQN $dft></td>
<td  id="lineBelowThick" align = "right"><EQN commas($SST)></td>
<td  id="lineBelowThick"></td>
<td  id="lineBelowThick"></td>
<td  id="lineBelowThick"></td>
</tr>
</table>
</div>
</body
</html>

这是css

#lineAboveThick {
    border-style: solid;
    border-width: 2px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
#lineAboveThin {
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
#lineBelowThick {
    border-style: solid;
    border-width: 2px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
table {
    border-collapse: collapse;
}

HTML：如何创建 Table 像本例中那样的行 Table

HTML: How to Create Table Lines like that in this Example Table

html

html-table

border