Multiple row span in HTML data

Question

I am trying to create a table similar to the one shown in the attached screenshot. Data for this table is coming through the python script, but I need some inputs on HTML side on how to create a table that can span through multiple rows

With my little knowledge on HTML, I tried creating the table with the following code, but it doesn't appear like its working as expected. It would be highly helpful if anyone can throw some light on what could be wrong here

table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}

<table style="width:100%">
  <table>
    <tr>
      <th>Project</th>
      <th>Environment</th>
      <th>Data1</th>
      <th>Multiple Data</th>
    </tr>
    <tr>
      <td rowspan="4">project1</td>
      <td rowspan="4">prod</td>
      <td rowspan="4">project1data</td>
      <td rowspan="4">project1 multi row data1</td>
      <td rowspan="4">project1 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project2</td>
      <td rowspan="4">stage</td>
      <td rowspan="4">project2data</td>
      <td rowspan="4">project2 multi row data1</td>
      <td rowspan="4">project2 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project3</td>
      <td rowspan="4">test</td>
      <td rowspan="4">project3data</td>
      <td rowspan="4">project3 multi row data1</td>
      <td rowspan="4">project3 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project4</td>
      <td rowspan="4">dev</td>
      <td rowspan="4">project4data</td>
      <td rowspan="4">project4 multi row data1</td>
      <td rowspan="4">project4 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project5</td>
      <td rowspan="4">qa</td>
      <td rowspan="4">project5data</td>
      <td rowspan="4">project5 multi row data1</td>
      <td rowspan="4">project5 multi row data2</td>
    </tr>

  </table>

Answer 1

The mistake is that you have rowspan="4" even in the last td. You will need to avoid a rowspan there:

<table>
  <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data1</th>
    <th>Multiple Data</th>
  </tr>
  <tr>
    <td rowspan="3">project1</td>
    <td rowspan="3">prod</td>
    <td rowspan="3">project1data</td>
    <td>project1 multi row data1</td>
  </tr>
  <tr>
    <td>project1 multi row data2</td>
  </tr>
  <tr>
    <td>project1 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project2</td>
    <td rowspan="3">stage</td>
    <td rowspan="3">project2data</td>
    <td>project2 multi row data1</td>
  </tr>
  <tr>
    <td>project2 multi row data2</td>
  </tr>
  <tr>
    <td>project2 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project3</td>
    <td rowspan="3">test</td>
    <td rowspan="3">project3data</td>
    <td>project3 multi row data1</td>
  </tr>
  <tr>
    <td>project3 multi row data2</td>
  </tr>
  <tr>
    <td>project3 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project4</td>
    <td rowspan="3">dev</td>
    <td rowspan="3">project4data</td>
    <td>project4 multi row data1</td>
  </tr>
  <tr>
    <td>project4 multi row data2</td>
  </tr>
  <tr>
    <td>project4 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project5</td>
    <td rowspan="3">qa</td>
    <td rowspan="3">project5data</td>
    <td>project5 multi row data1</td>
  </tr>
  <tr>
    <td>project5 multi row data2</td>
  </tr>
  <tr>
    <td>project5 multi row data3</td>
  </tr>

</table>

Answer 2

Please check this :

Basically you can use simple <div> inside the td to accomplish this for 3rd table column.

https://jsfiddle.net/ryb0w54a/

table { border:1px solid #000;border-collapse:collapse;}
th {border:1px solid #000;}
td { border:1px solid #000;}
div { border-bottom : 1px solid #000}
div.last { border-bottom : 0;}

<table>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
<tr>
	<td>Project 1</td>
	<td>Env 1</td>
	<td>Project 1 Data</td>
	<td>
		<div>project1 multi row data1</div>
		<div>project1 multi row data2</div>
		<div class="last">project1 multi row data3</div>
	</td>
</tr>
<tr>
	<td>Project 1</td>
	<td>Env 1</td>
	<td>Project 1 Data</td>
	<td>
		<div>project1 multi row data1</div>
		<div>project1 multi row data2</div>
		<div class="last">project1 multi row data3</div>
	</td>
</tr>
</table>