Multiple row span in HTML data

html

Solution

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>

Problem

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> ```

Original source