如何使模板html到表格的第一列分为4个单元格，第二列只有一个单元格？

Question

我使用 html 和 CSS 处理模板。我在使用 html 和 CSS 的设计表模板上遇到问题

我在第二行面临的问题是第一列有 4 个单元格，第二列有一个单元格

第一列有标题

performance

，第二个单元格分为 4 个单元格。

第二列有标题

disciplinary

，第二行只有一个单元格

那么如何设计这个桌子

我的尝试

<table>
      <thead>
          <tr>
              <th>
                  Performance Rating for
                  last two years
              </th>
              <th>Disciplinary letters (in last two years)</th>
          </tr>
      </thead>
      <tbody>
          <tr> <th>Year</th> <th></th> <th></th> </tr>
          <tr> <th>Year</th> <th></th>  <th></th> </tr>


      </tbody>
  </table>

下面所需表格的网页设计：

更新帖子

你能告诉我如何通过 colspan 和 rowspan 做到这一点吗？

是的，它可以工作，但我需要增加除年份之外的第二个单元格的宽度

下

performance rating column

<table border="1">
      <thead>
          <tr>
              <th colspan="2">
                  Performance Rating for
                  last two years
              </th>
              <th>Disciplinary letters (in last two years)</th>
          </tr>
      </thead>
      <tbody>
          <tr colspan="2">
            <td>Year</td>
            <td ></td>
            <td rowspan="2"></td>
          </tr>
           <tr colspan="2"> 
             <td >Year</td>
             <td></td>
           </tr>
           
      </tbody>
  </table>

Answer 1

我使用列跨度和行跨度解决了我的问题

这是我的代码

<table border="1">
      <thead>
          <tr>
              <th colspan="2">
                  Performance Rating for
                  last two years
              </th>
              <th>Disciplinary letters (in last two years)</th>
          </tr>
      </thead>
      <tbody>
          <tr colspan="2">
            <td style="width:50px;">Year</td>
            <td ></td>
            <td rowspan="2"></td>
          </tr>
           <tr colspan="2"> 
             <td style="width:50px;">Year</td>
             <td></td>
           </tr>
           
      </tbody>
  </table>