HTML: как создать такие строки в этом примере таблицы - PullRequest
Новая
       32

HTML: как создать такие строки в этом примере таблицы

1 голос
/ 12 апреля 2019

Я пытаюсь использовать html для создания таблицы с точно такими же строками таблицы, как в примере таблицы, показанной ниже.Я нашел миллион различных подходов онлайн (многие из которых, кажется, противоречат друг другу).Если возможно, я бы предпочел использовать только HTML, а не CSS.Вы заметите, что в таблице всего 3 строки таблицы со смесью как толстых, так и тонких линий.

enter image description here

Вот пример моего 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-таблица в настоящее время выглядит следующим образом:

enter image description here

Кто-нибудь может предложить код для добавления этих строк таблицы?Любая помощь приветствуется.

1 Ответ

1 голос
/ 12 апреля 2019

Вот решение, которое я построил для вас. Я просто установил границу ячейки так, чтобы она имела толщину только в верхней части первых двух строк, а затем в нижней части последней строки, а затем свернула границы, чтобы в линиях не было пробелов. 

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