我正在学习HTML表格。 我有这样的例子:
null
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>null
我不明白为什么表头（马）和数据（马）放在同一行，然后另一个数据（种马）放在另一行，例如。
<tr>
<th rowspan="2">Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
当我将第一个数据标记（Mare）移到第二行时，我得到了三列行。
那么，构造这样的表背后的直觉是什么呢？ 就不能用别的方法吗？
您希望输出是什么样子的？ null
您可能希望了解行跨和列跨在HTML中是如何工作的。
此网站很好地解释了如何创建表格布局，如示例中所示。horse->； 这意味着这匹马向下走了2个街区。 因此，您输入的下两个表数据（td或th）将位于该表的右侧。在本例中，在马之后，您写了Mare和stallion。 例如，如果您的行跨度为3，它将以如下方式显示 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>
相关问题
