如何仅使用HTML和CSS创建此网格

dluptydi  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(200)

你好,我怎样才能创建一个像这样的网格只使用HTML和CSS?谢谢你的帮助。

62lalag4

62lalag41#

你可以!你需要一个表标签...然后是表头然后是表体最后是表尾TR标签是表的行Td和th是单元格唯一的区别是th使文本比td标签更粗然后最后用css样式如果你想用网格创建它,我会很快回答你只要改变颜色...

<!DOCTYPE html>
    <html>
    <head>
<title></title>
</head>
<body>
<style type="text/css">
  table {
    width: 100%;
    border: 3px solid;
    border-collapse: collapse;
  }
  table tr {
    height: 30px;
  }
  table tr td:not(:nth-child(1)),
  table tr th:not(:nth-child(1)) {
    text-align: right;
  }
  table thead tr {
    background: gray;
    /*COLOR FOR HEAD */
  }
  table tbody tr:nth-child(even) {
    background: ghostwhite;
    /*COLOR FOR EVEN ROWS */
  }
  table tbody tr:nth-child(odd) {
    background: lightgray;
    /*COLOR FOR ODD ROWS */
  }
  table tfoot tr {
    background: gray;
    /*COLOR FOR FOOT */
  }
</style>
<table>
  <thead>
    <tr>
      <th></th>
      <th>COUNT</th>
      <th>MINUTES</th>
      <th>TOTAL MINUTES</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Direct Assignment Position</td>
      <td>18</td>
      <td>240.00</td>
      <td>4320.00</td>
    </tr>
    <tr>
      <td>Indirect Assignment Position</td>
      <td>29</td>
      <td>24.00</td>
      <td>696.00</td>
    </tr>
    <tr>
      <td>Establishments</td>
      <td>17</td>
      <td>29.00</td>
      <td>493.00</td>
    </tr>
    <tr>
      <td>SUBTOTAL</td>
      <td></td>
      <td></td>
      <td>5509.00</td>
    </tr>
    <tr>
      <td>Circuit days of travel</td>
      <td></td>
      <td></td>
      <td>1.25</td>
    </tr>
    <tr>
      <td>Travel Data</td>
      <td></td>
      <td></td>
      <td>600.00</td>
    </tr>
  <tfoot>
    <tr>
      <td>TOTAL</td>
      <td></td>
      <td></td>
      <td>6109.00</td>
    </tr>
  </tfoot>
  </tbody>
</table>
</body>
</html>

相关问题