如何构造表头而不是列中包含多行？

Question

我想按如下方式构建一个表：

我正在尝试在html中构建相同的表但遇到了麻烦。表头必须准确。任何帮助都很有帮助

Answer 1

您可以使用rowspan属性：

th {
  border:1px solid #000;
  height: 20px;
  width: 150px;
}

    <table>
  <thead>
    <tr>
      <th rowspan="4">#</th>
      <th>Name</th>
      <th rowspan="2">Permanent Address</th>
      <th rowspan="2">Type of Job</th>
      <th rowspan="2">Start work</th>
    </tr>
    <tr>
      <th>ID</th>
    </tr>
    <tr>
      <th>M/F</th>
      <th rowspan="2">Contract</th>
      <th rowspan="2">Place of Work</th>
      <th rowspan="2">Work Stops</th>
    </tr>
    <tr>
      <th>Birth</th>
    </tr>
  </thead>
</table>

仅供参考：如果您需要跨越多列，还有一个colspan属性。

Answer 2

试试这个......

＆＃13;

＆＃13;

body {
  padding: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
  border: 1px solid black;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td rowspan="4">#</td>
      <td>Name</td>
      <td rowspan="2">Permanent Address</td>
      <td rowspan="2">Type of Job</td>
      <td rowspan="2">Start work</td>
    </tr>
    <tr>
      <td>ID</td>
    </tr>
    <tr>
      <td>M/F</td>
      <td rowspan="2">Contract</td>
      <td rowspan="2">Place of Work</td>
      <td rowspan="2">Work Stops</td>
    </tr>
    <tr>
      <td>Birth</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;