表格如何调出好看的样式？

html部分：

<table>
  <tr>
    <td>属性1</td>
    <td>
      <input type="text">
    </td>
    <td>属性2</td>
    <td colspan="2">
      <input type="text">
    </td>
  </tr>
  <tr>
    <td rowspan="2">属性1</td>
    <td rowspan="2">
      <input type="text">
    </td>
    <td rowspan="2">属性2</td>
    <td>姓名</td>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>年龄</td>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>属性1</td>
    <td colspan="4">
      <input type="text">
    </td>
  </tr>
</table>

css部分：

table {
    
    
  width: 960px;
  border-collapse: collapse;  /*应用于表格的样式，合并相邻单元格的边框*/
}
table td {
    
    
  height: 40px;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
  font-family: "仿宋";
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #ABABAB;
}
table input {
    
    
  /*可输入区域样式*/
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

要清楚rowspan和colspan的使用：

注：每一种颜色代表每一行，也就是tr标签里面的内容，绿色那一行包含了属性1，属性2，姓名；而蓝色的那一行只包含了年龄，这是因为属性1和属性2已经使用了rowspan="2"，占了上下两个单元格，所以蓝色一行只有两个单元格可展示，而且只能展示在姓名下面，只有那两个单元格是没有被占用的；对于最后一行紫色那行，属性1右边的内容占了4个单元格，所有用了colspan="4"
效果如下：