How do I create this Table with html

August 19, 2022

I need to create this table with html, but I don’t understand yet how to separate the different rows.

>Solution :

colspan
This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value (1)

rowspan
This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the table section (, , , even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.

colspan & rowspan documentation

table {
    width: 100%;
    max-width: 800px;
}

td,
th {
    padding: 10px;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

.max {
    width: 60%;
}

.min {
    width: 40%;
}

<table>
    <tr>
        <th class="left">Project</th>
        <td colspan="4">Marketplace 1</td>
    </tr>
    <tr>
        <th class="left">Group</th>
        <td colspan="4">Group 1</td>
    </tr>
    <tr>
        <th rowspan="5" class="left">Members</th>
        <th class="max">Name</th>
        <th class="min">Role</th>
    <tr>
        <td>Name 1</td>
        <td>Scrum Master</td>
    <tr>
        <td>Name 2</td>
        <td>Developer</td>
    </tr>
    <tr>
        <td>Name 3</td>
        <td>Developer</td>
    </tr>
    <tr>
        <td>Name 4</td>
        <td>Developer / Devops</td>
    </tr>
    </tr>
</table>