th和tr标签功能混淆

Question

我在html表格中输入了以下代码。

<table>
<tbody>
    <thead>
        <tr>
            <th align="right" colspan="4">
                <span class="font-style-bold">SCHEDULE OF RATES</span>
            </th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th class="align-left">
                <div class="para">
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                    <span class="font-style-bold">Unit</span>
                </div>
            </th>
            <th class="align-left">
                <div class="para">
                    <span class="font-style-bold">Rate $</span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                    <span class="font-style-boldunderline">ROOFER</span>
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
            <td rowspan="align-left">
                <div class="para">
                </div>
            </td>
        </tr>
        <tr>
    </tbody>
</tbody>

这是css

  .frame-all thead th {
margin-top: 0em;
padding-left: 0.2em;
padding-bottom: 0.2em;
}

当我运行这个时，我得到以下屏幕。

当我将th更改为td时，我会看到以下屏幕（这就是我想要的）。只是想知道为什么差异，并且th

可以实现这种情况

Answer 1

表中只能有一个thead和tbody。两者都应该是<table>标记的直接子项。

<table>
  <thead>
    <tr>
      <th align="right" colspan="4">
        <span class="font-style-bold">SCHEDULE OF RATES</span>
      </th>
    </tr>
    <tr>
      <th class="align-left">
        <div class="para">
        </div>
      </th>
      <th class="align-left">
        <div class="para">
        </div>
      </th>
      <th class="align-left">
        <div class="para">
          <span class="font-style-bold">Unit</span>
        </div>
      </th>
      <th class="align-left">
        <div class="para">
          <span class="font-style-bold">Rate $</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
          <span class="font-style-boldunderline">ROOFER</span>
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
      <td rowspan="align-left">
        <div class="para">
        </div>
      </td>
    </tr>
  </tbody>
</table>