在网页开发中，表格是一种非常常见的元素，用于展示结构化数据。Materialize CSS 框架为开发者提供了一些简单而强大的工具来美化和优化表格的展示效果，使数据更加美观和易读。

本文将详细介绍 Materialize CSS 框架中 Table 的使用方法，包括如何创建基础表格、响应式表格、带有条纹和悬停效果的表格等，并通过示例展示如何应用这些功能。

1. 基础表格的使用

Materialize CSS 使用标准的 HTML 表格标签，如 <table>、<thead>、<tbody>、<tr>、<th> 和 <td>。要创建一个基础的 Materialize 表格，你只需在表格元素上添加 Materialize 提供的 .striped 或 .highlight 等类来增强表格的样式。

示例：基础表格

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

这是一个标准的 HTML 表格，它在没有添加任何 Materialize 类时，默认是一个普通表格。为了让表格更具风格，Materialize 提供了一些额外的类来增强视觉效果。

2. 条纹表格（Striped Table）

条纹表格（.striped）的作用是为每隔一行添加条纹背景颜色，以增强表格的可读性。使用这种类型的表格，用户可以更清楚地区分不同的行。

示例：带有条纹效果的表格

<table class="striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

在这个例子中，表格被赋予了 striped 类，每隔一行都有不同的背景颜色，使表格更加清晰易读。

3. 悬停效果表格（Hoverable Table）

为了提升用户体验，Materialize 还提供了悬停效果类 hoverable，当用户将鼠标悬停在表格行上时，会显示高亮效果。这在有大量数据时尤其有用，有助于用户快速找到所需的信息。

示例：带有悬停效果的表格

<table class="hoverable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

当用户将鼠标移动到表格的行时，hoverable 类会使当前行的背景颜色变亮，以便用户可以轻松识别所悬停的行。

4. 响应式表格（Responsive Table）

在移动设备上展示表格数据时，表格的宽度可能会超过屏幕的宽度，导致内容无法完全显示。Materialize 提供了 .responsive-table 类，用于创建响应式表格，确保在较小屏幕上也能很好地展示表格内容。

示例：响应式表格

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>22</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>35</td>
        <td>广州</td>
      </tr>
    </tbody>
  </table>
</div>

使用 .responsive-table 类时，表格会自动适应不同屏幕尺寸，并且在移动设备上表格可以水平滚动，确保内容不会溢出屏幕。

5. 边框表格（Bordered Table）

通过添加 bordered 类，可以为表格添加边框，使表格更加清晰可辨。

示例：带有边框的表格

<table class="bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

在这个示例中，表格使用了 bordered 类，每个单元格周围都添加了边框，使得表格数据更加规整，适合需要强对比度的场景。

6. 高亮表格（Highlight Table）

如果你希望表格中的某些行能有高亮效果，便于引导用户注意力，Materialize 提供了 highlight 类，可以为整个表格应用高亮效果。

示例：带有高亮效果的表格

<table class="highlight">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

highlight 类使表格内容更加醒目，尤其适合展示重要数据时使用。

7. 表格中心对齐（Centered Table）

在某些情况下，你可能希望表格的内容居中显示，Materialize 提供了 centered 类可以实现表格内容的居中对齐。

示例：内容居中的表格

<table class="centered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

通过 centered 类，表格中的文本内容将水平居中对齐，使表格显得更加整齐。

8.

完整示例代码

以下是一个结合多种 Materialize 表格样式的完整示例页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize 表格示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4 class="center-align">Materialize 表格示例</h4>

    <!-- 条纹表格 -->
    <h5>条纹表格</h5>
    <table class="striped">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>28</td>
          <td>北京</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>22</td>
          <td>上海</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>35</td>
          <td>广州</td>
        </tr>
      </tbody>
    </table>

    <!-- 悬停效果表格 -->
    <h5>悬停效果表格</h5>
    <table class="hoverable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>28</td>
          <td>北京</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>22</td>
          <td>上海</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>35</td>
          <td>广州</td>
        </tr>
      </tbody>
    </table>

    <!-- 响应式表格 -->
    <h5>响应式表格</h5>
    <div class="responsive-table">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>28</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>22</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>35</td>
            <td>广州</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

结论

通过 Materialize CSS 提供的各种表格样式类，开发者可以快速地为网页添加功能强大且美观的表格。无论是带有条纹、悬停效果还是响应式的表格，Materialize 都提供了简洁的解决方案，使开发变得更加高效。