HTML 数据中的多行跨度

Question

我正在尝试创建一个类似于附加屏幕截图中显示的表。该表的数据来自 python 脚本，但我需要在 HTML 端输入一些关于如何创建可以跨越多行的表的输入

由于我对 HTML 知之甚少，我尝试使用以下代码创建表格，但它看起来不像预期的那样工作。如果有人能对这里可能出现的问题有所了解，那将非常有帮助

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

错误是你rowspan="4"甚至在最后td。您将需要避免在rowspan那里：

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