Почему заголовок таблицы и данные помещаются в одну строку в HTML? - PullRequest
Новая
       8

Почему заголовок таблицы и данные помещаются в одну строку в HTML?

0 голосов
/ 12 июля 2020

Я изучаю HTML таблиц. У меня есть такой пример: 

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>

Я не понимаю, почему заголовок таблицы (Horse) и данные (Mare) помещаются в одну строку, а затем помещаются другие данные (Stallion) в другой строке, например 

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

Когда я перемещаю первый тег данных (Mare) во вторую строку, я получаю строку из трех столбцов.

Итак, какова интуиция при построении таблицы как это? Разве нельзя было сделать иначе?

1 Ответ

0 голосов
/ 12 июля 2020

Каким должен быть результат?
Возможно, вы захотите узнать, как работают диапазоны строк и столбцов в html.
На этом веб-сайте очень хорошо объясняется, как создавать макеты таблиц, как в вашем примере.

<th rowspan="2">Horse</th> -> Это будет означать, что Лошадь занимает 2 блока вниз. Таким образом, следующие 2 данные таблицы (td или th), которые вы вводите, будут go справа от них. В этом случае после Horse вы написали Mare and Stallion. Например, если бы у вас был диапазон строк 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, с другой стороны, занимает блоки по строке. Для примера в вашей таблице у вас может быть максимум 2 colspan, поскольку ваша таблица имеет только 2 столбца. Как и в строке
<tr><th colspan="2">Crocodile</th></tr>
И ничего больше не будет добавлено в эту строку.
Я очень надеюсь, что это дало ответ на ваш вопрос и прояснило его.

...