阿卡不拉

Appearance

表格元素（了解） ​

表格的历史背景 ​

在 CSS 技术出现之前，网页开发者通常使用表格（table）来实现页面布局。然而，随着 CSS 布局技术的成熟和发展，表格布局已经逐渐被淘汰。

表格的现状和应用场景 ​

目前，表格主要用于以下场景：

  • 数据展示：在后台管理系统中展示结构化数据
  • 报表系统：财务报表、统计数据等
  • 比较信息：产品对比、价格表等
  • 邮件模板：某些邮件客户端仍需要表格布局

表格术语 ​

表格元素-1

表格元素-2

表格元素-3

简单案例 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table caption {
        font-size: 2em;
        font-weight: bold;
        margin: 1em 0;
      }
      th,
      td {
        border: 1px solid #999;
        text-align: center;
        padding: 20px 0;
      }
      thead tr {
        background: #008c8c;
        color: #fff;
      }
      tbody tr:nth-child(odd) {
        background: #eee;
      }
      tbody tr:hover {
        background: #ccc;
      }
      tbody td:first-child {
        color: chocolate;
      }
      tfoot td {
        text-align: right;
        padding-right: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        这是表格标题
      </caption>
      <thead>
        <!-- table row -->
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
          <th>列4</th>
          <th>列5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td rowspan="2">数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <!-- <td>数据1</td> -->
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">合计：XXXX</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

为什么表格不再适用于网页布局？ ​

1. 渲染性能问题 ​

表格的渲染速度相对较慢，浏览器需要等待整个表格内容加载完成后才能开始渲染，这会影响页面的加载体验。

2. 语义化问题 ​

表格应该用于展示表格数据，而不是页面布局。使用表格进行布局违背了 HTML 语义化的原则。

3. 响应式设计困难 ​

表格结构固定，难以适应不同屏幕尺寸，不利于移动端适配。