请问这种表格怎么用HTML,CSS实现

img


请问这种表格怎么用HTML,CSS实现？基础三列表格上面两行均分两列，还请大家们指点。

img

<html>
<style>
    table {
        border-collapse: collapse;
          width: 270px;
    }
    td, th {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
          width: 90px;
    }
    th {
        background-color: #dfeff8;
        color: #1d78c5;
    }
</style>

<div>
<table>
  <tr>
    <th style="width: 50%">姓名</th>
    <td style="width: 50%">张三</td>
  </tr>
  <tr>
    <th style="border-bottom: none">部门</th>
    <td style="border-bottom: none">信息部</td>
  </tr>
</table>
<table>
  <tr>
    <th>本次消费</th>
    <th>本月消费</th>
    <th>余额</th>
  </tr>
  <tr>
    <td>10</td>
    <td>230</td>
    <td>700</td>
  </tr>
</table>
</div>
</html>