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

Question

I'm learning about HTML tables. I've got this example:

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>

I don't understand why are table header (Horse) and data (Mare) placed in the same row, and then another data (Stallion) is placed in another row, e.g.

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

When I move the first data tag (Mare) to second row, I get three-column row.

So, what's the intuition behind constructing the table like this? Couldn't it be done some other way?

score 0 · Accepted Answer · answered Jul 12 '20 at 12:28

How did you want the output to look like?
You might want to read up on how rowspans and colspans work in html.
This website explains very well how to create table layouts, like the one in your example.

<th rowspan="2">Horse</th> -> This would mean that Horse takes up 2 blocks downwards. So the next 2 table data (td or th) that you enter would go to the right of that.In this case after Horse you've written Mare and Stallion. For example if you had a rowspan of 3 it would come out in this way 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 on the other hand takes up blocks along the row. For the example on your table you can have a colspan of maximum 2 since your table only has 2 columns.Like in the line
<tr><th colspan="2">Crocodile</th></tr>
And nothing else will be added to that row.
I really hope this has answered your question and made it more clear.

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

1 Answers1