事情是这样的，我之前一直没有系统学习过HTML，但是今天在完成分配的需求时，需要使用一个表格，但是element的表格并不适用，因为呢element的表格基本都是定义每一列的属性，然后绑定数据。这个需求中并不适用，所以我去学习了一下HTML的table

HTML之table

来看我所遇见的需求:展示一个项目的详情信息
这是我利用element的列表组件所展示的最后结果，但是这个组件有缺点，不能控制宽度。所以最后很不美观，我就被要求重做啦

这是我利用table所完成的，最后看起来整齐多了

  1. table的标签
  • tr标签：定义表格中的一行，嵌套在 < table >< /table >中
  • th标签：定义表格中的表头单元格，嵌套在< tr >< /tr>中
  • td标签：定义表格中的数据单元格，嵌套在< tr>< /tr>中
  • caption标签：定义表格上方的数据 嵌套在< table>< /table>中
    table表格的标签很少，以上几个就可以简单做出一个表格了，其实表格制作不难，更过的利用css来控制样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <table>
      <caption>
        Front-end web developer course 2021
      </caption>
      <thead>
        <tr>
          <th scope="col">Person</th>
          <th scope="col">Most interest in</th>
          <th scope="col">Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Chris</th>
          <td>HTML tables</td>
          <td>22</td>
        </tr>
        <tr>
          <th scope="row">Dennis</th>
          <td>Web accessibility</td>
          <td>45</td>
        </tr>
        <tr>
            <th scope="row">Sarah</th>
          <td>JavaScript frameworks</td>
          <td>29</td>
        </tr>
        <tr>
          <th scope="row">Karen</th>
          <td>Web performance</td>
          <td>36</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" colspan="2">Average age</th>
          <td>33</td>
        </tr>
      </tfoot>
    </table>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    table {
      border-collapse: collapse;
      border: 2px solid rgb(140 140 140);
      font-family: sans-serif;
      font-size: 0.8rem;
      letter-spacing: 1px;
    }

    caption {
      caption-side: bottom;
      padding: 10px;
      font-weight: bold;
    }

    thead,
    tfoot {
      background-color: rgb(228 240 245);
    }

    th,
    td {
      border: 1px solid rgb(160 160 160);
      padding: 8px 10px;
    }

    td:last-of-type {
      text-align: center;
    }

    tbody > tr:nth-of-type(even) {
      background-color: rgb(237 238 242);
    }

    tfoot th {
      text-align: right;
    }

    tfoot td {
      font-weight: bold;
    }
    以上便是一个表格的示例，效果如下