时间戳

首页 > 解决方案 > HTML：如何在此示例表中创建类似的表行

html - HTML：如何在此示例表中创建类似的表行

问题描述

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

在此处输入图像描述

到目前为止，这是我的 HTML 示例。一些注意事项： 1）您可以在第一个“tr”标签中看到我尝试在 ANOVA 标题下的表格行 - 这目前不起作用。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 表目前如下所示：

在此处输入图像描述

任何人都可以建议添加这些表格行的代码吗？任何帮助表示赞赏。

标签： htmlhtml-tableborder

解决方案

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

<!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;
}

推荐阅读