前端样式之表格的2种形式

表格的第一种形式：table标签

• 前端开发中可以使用<table></table>标签制作表格，table标签内包含的标签元素如下：

  • <caption> 定义表格标题，标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
  • <thead> 用于表格的表头内容。
  • <tbody> 用于表格的主体内容。
  • <tfoot> 定义表格的页脚（脚注或表注）
  • <tr> 定义表格中的行。
  • <th> 定义表格内的表头单元格。
  • <td> 定义表格中的标准单元格。
  • <colgroup> 用于对表格中的列进行组合，以便对其进行格式化。
  • <col> 为表格中一个或多个列定义属性值。

• 实例：

  <table>
      <!-- 表格的标题 -->
      <caption>
        表格的标题
      </caption>
      <colgroup>
        <col width="30" />
        <col width="70" />
        <col width="100" />
      </colgroup>
      <!-- 头部 -->
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>联系方式</th>
        </tr>
      </thead>
      <!-- 主体： 允许有多个 -->
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>13555555555</td>
        </tr>
          <tr>
          <td>2</td>
          <td>李四</td>
          <td>1388888888</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>13555555555</td>
        </tr>
          <tr>
          <td>2</td>
          <td>李四</td>
          <td>1388888888</td>
        </tr>
      </tbody>
      <!-- 底部 -->
      <tfoot>
        <tr>
          <td>X</td>
          <td>X</td>
          <td>X</td>
        </tr>
      </tfoot>
    </table>

表格的第二种形式：类属性

• 前端开发中任何标签元素都可以通过类属性display: table转化成表格形式，display的其他属性值包括：

  • table-caption 此元素会作为一个表格标题显示（类似 <caption>）
  • table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
  • table-row 此元素会作为一个表格行显示（类似 <tr>）。
  • table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
  • table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
  • table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
  • table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
  • table-column 此元素会作为一个单元格列显示（类似 <col>）

• 实例：

    <style>
      /* 表格 */
      .table {
        display: table;
        width: 300px;
        text-align: center;
      }
      /* 标题 */
      .table-caption {
        display: table-caption;
      }
      /* 表头 */
      .table-thead {
        display: table-header-group;
      }
      /* 行 */
      .table-row {
        display: table-row;
      }
      /* 列 */
      .table-cell {
        display: table-cell;
      }
      /* 主体 */
      .table-tbody {
        display: table-row-group;
      }
      /* 底部 */
      .table-tfoot {
        display: table-footer-group;
      }
      /* 列分组样式 */
      .table-colgroup {
        display: table-column-group;
      }
      .table-colgroup .table-col {
        display: table-column;
      }
    </style>
  <!-- 表格:<table> -->
    <div class="table">
      <!-- 标题 <caption>-->
      <div class="table-caption">表格表题</div>
      <!-- 列分组<colgroup> -->
      <div class="table-colgroup">
        <div class="table-col"></div>
        <div class="table-col"></div>
        <div class="table-col"></div>
      </div>
      <!-- 表头:<thead> -->
      <div class="table-thead">
        <!-- 行 -->
        <div class="table-row">
          <div class="table-cell">ID</div>
          <div class="table-cell">姓名</div>
          <div class="table-cell">联系方式</div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="table-tbody">
        <div class="table-row">
          <div class="table-cell">1</div>
          <div class="table-cell">张三</div>
          <div class="table-cell">1355555555</div>
        </div>
        <div class="table-row">
          <div class="table-cell">2</div>
          <div class="table-cell">李四</div>
          <div class="table-cell">13888888888</div>
        </div>
      </div>
      <!-- 底部<tfoot> -->
      <div class="table-tfoot">
        <div class="table-row">
          <div class="table-cell">X</div>
          <div class="table-cell">X</div>
          <div class="table-cell">X</div>
        </div>
      </div>
    </div>

总结：

• table标签制作表格适用于全新制作表格使用，display: table适用于前端页面已经存在很多标签数据的情况下二次开发编写表格。
• display: table的方式制作的表格更适用于flex或grid布局里垂直居中。