为什么table header和数据放在HTML的同一行？

Question

我正在了解 HTML table。我有这个例子：

html {
    font-family: sans-serif;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-size: 0.8rem;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px 20px;
}

th {
    background-color: rgb(235, 235, 235);
}

td {
    text-align: center;
}

tr:nth-child(even) td {
    background-color: rgb(250, 250, 250);
}

tr:nth-child(odd) td {
    background-color: rgb(245, 245, 245);
}

caption {
    padding: 10px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Animals table</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>Animals table</h1>

    <table>
        <tr>
            <th colspan="2">Animals</th>
        </tr>
        <tr>
            <th colspan="2">Hippopotamus</th>
        </tr>
        <tr>
            <th rowspan="2">Horse</th>
            <td>Mare</td>
        </tr>
        <tr>
            <td>Stallion</td>
        </tr>
        <tr>
            <th colspan="2">Crocodile</th>
        </tr>
        <tr>
            <th rowspan="2">Chicken</th>
            <td>Hen</td>
        </tr>
        <tr>
            <td>Rooster</td>
        </tr>
    </table>


</body>

</html>

我不明白为什么 table header (Horse) 和数据 (Mare) 放在同一行，然后另一个数据 (Stallion) 放在另一行，例如

<tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
</tr>
<tr>
    <td>Stallion</td>
</tr>

当我将第一个数据标签 (Mare) 移动到第二行时，我得到 three-column 行。

那么，像这样构造 table 背后的直觉是什么？不能用其他方式完成吗？

Answer 1

您希望输出结果如何？
您可能想了解行跨度和列跨度在 html 中的工作原理。
This website 很好地解释了如何创建 table 布局，例如在你的例子中。

<th rowspan="2">Horse</th> -> 这意味着 Horse 向下占用 2 个方块。因此，您输入的下一个 2 table 数据（td 或 th）将位于 that.In 的右侧，在您编写了 Mare 和 Stallion 之后的 Horse 之后。例如，如果你的行跨度为 3，它会以这种方式出现 V

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-size: 0.8rem;
}
td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px 20px;
}

<table>
  <tr>
    <th rowspan="3">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <td>Colt</td>
  </tr>
</table>

另一方面，Colspan 沿行占据块。对于 table 上的示例，您的 colspan 最大值可以为 2，因为您的 table 在行
中只有 2 columns.Like <tr><th colspan="2">Crocodile</th></tr>
并且不会向该行添加任何其他内容。
我真的希望这已经回答了你的问题并使它更清楚。

为什么table header和数据放在HTML的同一行？

Why are table header and data placed in the same row in HTML?

html

html-table

table-structure