需要具有rowspan和colspan的表设计

Question

我正在设计工资单设计，应使用表格结构来实现。我做了很多尝试，但是我对rowspan和colspan仍然很困惑。我还附加了以下html代码，我需要在附加的png中实现整个设计

<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">

  <thead>
    <tr>
      <th colspan="2"> Employee Details</th>
      <th colspan="2">Payment & Leave Details</th>
      <th colspan="2">Location Details</th>
      <!--<th>ABC</th>-->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">Item1</td>
      <td colspan="2">Item1</td>
      <td colspan="2">Item1</td>
      <td colspan="4">Item1</td>
    </tr>
    <tr>
      <td>Name1</td>
      <td>Price1</td>
    </tr>
    <tr>
      <td>Name2</td>
      <td>Price2</td>
    </tr>
    <tr>
      <td>Name3</td>
      <td>Price3</td>
    </tr>
    <tr>
      <td>Item2</td>
      <td>Item2</td>
      <td colspan="2">Item2</td>
      <td>Item2</td>
    </tr>
  </tbody>

</table>

Answer 1

table {
  font: 12px 'Arial';
  margin: 10px auto;
  background: #fff;
  text-align: left;
  border: 1px solid #000;
  border-collapse: collapse;
}

table * { border: 1px solid #000; padding: 5px; white-space: nowrap; }

caption {
  background: #fff;
  text-transform: uppercase;
  text-align: left;
  font-weight: bold;
}

tr { background: #fafafb; }

th { color: #fff; background: #0080bf; }

.field { font-weight: bold; }

<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
  <caption>MS. KUSUM KISHORI</caption>
  <thead>
    <tr>
      <th colspan="4">Employee Details</th>
      <th colspan="7">Payment & Leave Details</th>
      <th colspan="2">Location Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="field">Emp No.</td>
      <td colspan="3">929753</td>
      <td class="field">Bank Name</td>
      <td colspan="6">AXIS Bank</td>
      <td class="field">Location</td>
      <td>Item1</td>
    </tr>
    <tr>
      <td class="field">Grade</td>
      <td>C1</td>
      <td class="field">UAN</td>
      <td>10110101013999</td>
      <td class="field">Acc No.</td>
      <td colspan="6">10110101013999</td>
      <td class="field">Base Br.</td>
      <td>TSC - Hyderabad</td>
    </tr>
    <tr>
      <td class="field">PAN</td>
      <td colspan="3">DROPK7729E</td>
      <td class="field">Days paid</td>
      <td colspan="6">31</td>
      <td class="field">Depute Br.</td>
      <td>TSC - Hyderabad</td>
    </tr>
    <tr>
      <td colspan="4"></td>
      <td class="field">Leave Balance</td>
      <td class="field">EL</td>
      <td>36.32</td>
      <td class="field">SL</td>
      <td>24.32</td>
      <td class="field">CL</td>
      <td>2.50</td>
      <td class="field">WON/SWON</td>
      <td>2874529</td>
    </tr>
  </tbody>

</table>

<table id="woSpTable2" class="table table-bordered table-responsive table-striped fontsize">
  <thead>
    <tr>
      <th>Earnings</th>
      <th>Arrears</th>
      <th>Current</th>
      <th>Deductions</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Total Earnings (Current + Arrears)</td>
      <td>34,710.00</td>
      <td>Total Deductions</td>
      <td>2,817.00</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Op</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td>Op</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </tbody>
</table>