W3.CSS 表格

W3.CSS 是一个非常流行的 CSS 框架，它拥有一系列的样式和组件，可以帮助开发者轻松地创建漂亮的网页。

其中包括很多表格样式和任何类型的表格都可以使用 W3.CSS 表格来实现。

如何使用 W3.CSS 表格

要使用 W3.CSS 表格，首先需要引入 W3.CSS 框架。可以将以下代码添加到 HTML 文件的头部：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

然后，可以使用以下 HTML 代码来创建基本的 W3.CSS 表格：

<div class="w3-container">
  <table class="w3-table-all">
    <thead>
      <tr class="w3-light-grey">
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
        <td>单元格 3</td>
      </tr>
      <tr class="w3-hover-light-grey">
        <td>单元格 4</td>
        <td>单元格 5</td>
        <td>单元格 6</td>
      </tr>
      <tr>
        <td>单元格 7</td>
        <td>单元格 8</td>
        <td>单元格 9</td>
      </tr>
    </tbody>
  </table>
</div>

首先，创建一个 div 元素并设置其类名为 "w3-container"，这是 W3.CSS 提供的一个类，用于将组件包装在容器中。

然后创建一个 table 元素，并设置其类名为 "w3-table-all"，这将应用 W3.CSS 的默认表格样式。

thead 标签中包含表格的列标题，而 tbody 标签中包含表格的具体内容。

在示例中，第一行包含三个表头单元格（"标题 1"、"标题 2" 和 "标题 3"），后面的行包含这些列所对应的数据。

第一列为 "单元格 1"、"单元格 4" 和 "单元格 7"，第二列为 "单元格 2"、"单元格 5" 和 "单元格 8"，第三列为 "单元格 3"、"单元格 6"和 "单元格 9"。

最后，在需要交互式表格的行中添加类名 "w3-hover-light-grey"，这将使行在鼠标悬停时变为浅灰色。

其他 W3.CSS 表格样式

除了上面提到的默认表格样式外，W3.CSS 还提供了其他样式。以下是一些常见的示例：

简单表格

简单的 W3.CSS 表格不带任何外框或阴影，并具有简单的灰色线条。

<div class="w3-container">
  <table class="w3-table">
    <thead>
      <tr class="w3-light-grey">
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
        <td>单元格 3</td>
      </tr>
      <tr>
        <td>单元格 4</td>
        <td>单元格 5</td>
        <td>单元格 6</td>
      </tr>
      <tr>
        <td>单元格 7</td>
        <td>单元格 8</td>
        <td>单元格 9</td>
      </tr>
    </tbody>
  </table>
</div>

带外边框的表格

可以使用 "w3-bordered" 类将外边框添加到表格。还可以使用 "w3-border" 类添加顶部和底部边框。

<div class="w3-container">
  <table class="w3-table w3-bordered w3-border">
    <thead>
      <tr class="w3-light-grey">
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
        <td>单元格 3</td>
      </tr>
      <tr>
        <td>单元格 4</td>
        <td>单元格 5</td>
        <td>单元格 6</td>
      </tr>
      <tr>
        <td>单元格 7</td>
        <td>单元格 8</td>
        <td>单元格 9</td>
      </tr>
    </tbody>
  </table>
</div>

高亮表格

使用 "w3-hoverable" 和 "w3-striped" 类为表格添加交互性和斑马线条。

<div class="w3-container">
  <table class="w3-table w3-hoverable w3-striped">
    <thead>
      <tr class="w3-light-grey">
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
        <td>单元格 3</td>
      </tr>
      <tr>
        <td>单元格 4</td>
        <td>单元格 5</td>
        <td>单元格 6</td>
      </tr>
      <tr>
        <td>单元格 7</td>
        <td>单元格 8</td>
        <td>单元格 9</td>
      </tr>
    </tbody>
  </table>
</div>

总结

W3.CSS 表格可以轻松地创建漂亮的、易于阅读的表格。只需要使用 W3.CSS 提供的样式和类，就可以使表格具有不同的外观和交互性。

以上是一些常见的 W3.CSS 表格样式示例，但 W3.CSS 还提供了许多其他选项和定制方法，如自定义表格边框、表头和表格单元格的背景色等。建议开发者查看官方文档，以便更好地利用这个框架来处理表格和其他 Web 元素。