How do I create this Table with html-CodePudding

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

CodePudding user response：

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 >Project</th>
        <td colspan="4">Marketplace 1</td>
    </tr>
    <tr>
        <th >Group</th>
        <td colspan="4">Group 1</td>
    </tr>
    <tr>
        <th rowspan="5" >Members</th>
        <th >Name</th>
        <th >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>

CodePudding user response：

A friend helped me with this, it's the same table but in Spanish:

<table>
  <tr>
      <th>Proyecto</th>
      <td colspan="2">Marketplace 1</td>
  </tr>
  <tr>
      <th>Grupo</th>
      <td colspan="2">Grupo 17</td>
  </tr>
  <tr>
      <tr>
         <th rowspan="5">Integrantes</th>
         <th>Nombre</th>
         <th>Rol</th>
      </tr>
      <tr>
         <td>Carlos Figueredo Triana</td>
         <td>Developer</td>
      </tr>
      <tr>
         <td>Carlos Figueredo Triana</td>
         <td>Developer</td>
      </tr>
      <tr>
         <td>Carlos Figueredo Triana</td>
         <td>Developer</td>
      </tr>
      <tr>
         <td>Carlos Figueredo Triana</td>
         <td>Developer</td>
      </tr>
</table>

CodePudding user response：

I think this will help you to make any kind of table

Here is the link https://css-tricks.com/complete-guide-table-element/

CodePudding user response：

You can use the following code

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table >
<thead>
  <tr>
    <th >Project</th>
    <th  colspan="2">Marketplace 1</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td >Group</td>
    <td  colspan="2">Group 1</td>
  </tr>
  <tr>
    <td  rowspan="5">Members</td>
    <td >Name</td>
    <td >Role</td>
  </tr>
  <tr>
    <td >Name 1</td>
    <td >Scrum master</td>
  </tr>
  <tr>
    <td ></td>
    <td ></td>
  </tr>
  <tr>
    <td ></td>
    <td ></td>
  </tr>
  <tr>
    <td ></td>
    <td ></td>
  </tr>
</tbody>
</table>

CodePudding user response：

For separating different rows use rowspan. Tablefull code for your table hope this helps