html table 表格中的单元格格式问题

被要求写这么个表格

<tr>
        <td colspan="1" style="font-weight: normal;">住房情况</td>
        <td colspan="6">{{ houseConditions }}</td>
      </tr>
      <tr>
        <td rowspan="2">住房信息</td>
        <td>住房费用(自有租房不填)</td>
        <td>{{ rental }}</td>
        <td>距门店距离</td>
        <td>{{ deptDistance }}</td>
        <td rowspan="2">备注说明</td>
        <td rowspan="2"><p class="xianzhi"><a @click="remarkDetai()">{{ remark }}</a></p></td>
      </tr>
      <tr>

我觉的这个代码没毛病，但是它呈现出来的是一下这种效果

如果把代码的位置换一下的话，也就是让第一行和第三行换行的话结果是这样的

<tr>
        <td rowspan="2">住房信息</td>
        <td>住房费用(自有租房不填)</td>
        <td>{{ rental }}</td>
        <td>距门店距离</td>
        <td>{{ deptDistance }}</td>
        <td rowspan="2">备注说明</td>
        <td rowspan="2"><p class="xianzhi"><a @click="remarkDetai()">{{ remark }}</a></p></td>
      </tr>
      <tr>
        <td>户型</td>
        <td>{{ houseType }}</td>
        <td>距学校距离</td>
        <td>{{ schoolDistance }}</td>
      </tr>
      <tr>
        <td colspan="1" style="font-weight: normal;">住房情况</td>
        <td colspan="6">{{ houseConditions }}</td>
      </tr>

这个格式是我想要的，但是两列的这一行放在第一行就不行了，最终解决的方案就是 把第一行的td改成th，然后把字体改成normal

<tr>
        <th colspan="1" style="font-weight: normal;">住房情况</th>
        <th colspan="6">{{ houseConditions }}</th>
      </tr>
      <tr>
        <td rowspan="2">住房信息</td>
        <td>住房费用(自有租房不填)</td>
        <td>{{ rental }}</td>
        <td>距门店距离</td>
        <td>{{ deptDistance }}</td>
        <td rowspan="2">备注说明</td>
        <td rowspan="2"><p class="xianzhi"><a @click="remarkDetai()">{{ remark }}</a></p></td>
      </tr>
      <tr>
        <td>户型</td>
        <td>{{ houseType }}</td>
        <td>距学校距离</td>
        <td>{{ schoolDistance }}</td>
      </tr>

把td换成th就解决了，代码里没有写任何修改th样式的css代码，我去w3school官网查了一下td和th的区别，上面写的是

td元素内部的文字会呈现居中对齐粗体文本，而td内的文本通常是左对齐的普通文本，除了这些没有别的，以上的问题也不知道为什么会这样