垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 表格 ​

Foundation 提供了强大的表格样式，可以创建美观、响应式的数据表格。本章将介绍 Foundation 表格的各种用法。

基本表格 ​

创建基本表格非常简单，只需在 <table> 标签上添加适当的类：

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

表格样式变体 ​

悬停效果 ​

使用 .hover 类添加鼠标悬停效果：

html
<table class="hover">
    <thead>
        <tr>
            <th>产品</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>笔记本电脑</td>
            <td>¥5999</td>
            <td>100</td>
        </tr>
        <tr>
            <td>智能手机</td>
            <td>¥3999</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

条纹效果 ​

使用 .striped 类创建斑马纹效果：

html
<table class="striped">
    <thead>
        <tr>
            <th>日期</th>
            <th>事件</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2024-01-01</td>
            <td>新年活动</td>
            <td>已完成</td>
        </tr>
        <tr>
            <td>2024-02-14</td>
            <td>情人节促销</td>
            <td>进行中</td>
        </tr>
        <tr>
            <td>2024-03-08</td>
            <td>妇女节特惠</td>
            <td>计划中</td>
        </tr>
        <tr>
            <td>2024-05-01</td>
            <td>劳动节活动</td>
            <td>计划中</td>
        </tr>
    </tbody>
</table>

组合样式 ​

可以同时使用多个类：

html
<table class="hover striped">
    <!-- 同时具有悬停和条纹效果 -->
</table>

堆叠表格（响应式） ​

在小屏幕上，表格可能难以阅读。使用 .stack 类可以让表格在小屏幕上垂直堆叠：

html
<table class="stack">
    <thead>
        <tr>
            <th>姓名</th>
            <th>职位</th>
            <th>部门</th>
            <th>薪资</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>前端工程师</td>
            <td>技术部</td>
            <td>¥15000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>产品经理</td>
            <td>产品部</td>
            <td>¥18000</td>
        </tr>
    </tbody>
</table>

滚动表格 ​

使用 .table-scroll 包装器创建可水平滚动的表格：

html
<div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>分类</th>
                <th>价格</th>
                <th>库存</th>
                <th>供应商</th>
                <th>入库日期</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>无线蓝牙耳机</td>
                <td>电子产品</td>
                <td>¥299</td>
                <td>500</td>
                <td>科技有限公司</td>
                <td>2024-01-15</td>
                <td>在售</td>
            </tr>
            <!-- 更多行... -->
        </tbody>
    </table>
</div>

无边框表格 ​

使用 .unstriped 类创建无条纹、简洁的表格：

html
<table class="unstriped">
    <tbody>
        <tr>
            <td>项目 1</td>
            <td>描述文本</td>
        </tr>
        <tr>
            <td>项目 2</td>
            <td>描述文本</td>
        </tr>
    </tbody>
</table>

表格表头和表尾 ​

表头（thead） ​

html
<table>
    <thead>
        <tr>
            <th width="200">列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行 -->
    </tbody>
</table>

表尾（tfoot） ​

html
<table>
    <thead>
        <tr>
            <th>产品</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>产品 A</td>
            <td>10</td>
            <td>¥1000</td>
        </tr>
        <tr>
            <td>产品 B</td>
            <td>5</td>
            <td>¥500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td>15</td>
            <td>¥1500</td>
        </tr>
    </tfoot>
</table>

单元格对齐 ​

文本对齐 ​

html
<table>
    <thead>
        <tr>
            <th class="text-left">左对齐</th>
            <th class="text-center">居中对齐</th>
            <th class="text-right">右对齐</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-left">文本</td>
            <td class="text-center">文本</td>
            <td class="text-right">文本</td>
        </tr>
    </tbody>
</table>

垂直对齐 ​

html
<style>
    .align-top { vertical-align: top; }
    .align-middle { vertical-align: middle; }
    .align-bottom { vertical-align: bottom; }
</style>

<table>
    <tr style="height: 100px;">
        <td class="align-top">顶部对齐</td>
        <td class="align-middle">垂直居中</td>
        <td class="align-bottom">底部对齐</td>
    </tr>
</table>

合并单元格 ​

列合并（colspan） ​

html
<table>
    <thead>
        <tr>
            <th colspan="3">2024年销售报表</th>
        </tr>
        <tr>
            <th>季度</th>
            <th>销售额</th>
            <th>增长率</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1</td>
            <td>¥100万</td>
            <td>10%</td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>¥120万</td>
            <td>20%</td>
        </tr>
    </tbody>
</table>

行合并（rowspan） ​

html
<table>
    <thead>
        <tr>
            <th>部门</th>
            <th>员工</th>
            <th>职位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">技术部</td>
            <td>张三</td>
            <td>前端工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>后端工程师</td>
        </tr>
        <tr>
            <td rowspan="2">市场部</td>
            <td>王五</td>
            <td>市场经理</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>市场专员</td>
        </tr>
    </tbody>
</table>

自定义表格样式 ​

使用 Sass 变量 ​

如果使用 Sass，可以自定义表格样式：

scss
// 自定义表格变量
$table-background: #fff;
$table-color-scale: 5%;
$table-border: 1px solid #f1f1f1;
$table-padding: 0.5rem 0.625rem;
$table-hover-scale: 2%;
$table-stripe: even;
$table-head-background: #f8f8f8;
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: #f8f8f8;
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);

自定义 CSS ​

html
<style>
    /* 自定义表格样式 */
    .custom-table {
        border-collapse: collapse;
        width: 100%;
    }

    .custom-table th {
        background-color: #1779ba;
        color: white;
        font-weight: bold;
        padding: 12px;
    }

    .custom-table td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .custom-table tr:hover {
        background-color: #f5f5f5;
    }
</style>

<table class="custom-table">
    <!-- 表格内容 -->
</table>

完整示例：数据表格 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 表格示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .status-active { color: #3adb76; }
        .status-pending { color: #ffae00; }
        .status-inactive { color: #cc4b37; }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>用户管理</h1>

        <div class="table-scroll">
            <table class="hover striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>注册日期</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>admin</td>
                        <td>admin@example.com</td>
                        <td>管理员</td>
                        <td>2023-01-01</td>
                        <td><span class="status-active">活跃</span></td>
                        <td>
                            <a href="#" class="button tiny">编辑</a>
                            <a href="#" class="button tiny alert">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>user1</td>
                        <td>user1@example.com</td>
                        <td>普通用户</td>
                        <td>2023-06-15</td>
                        <td><span class="status-pending">待审核</span></td>
                        <td>
                            <a href="#" class="button tiny">编辑</a>
                            <a href="#" class="button tiny alert">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>user2</td>
                        <td>user2@example.com</td>
                        <td>普通用户</td>
                        <td>2023-08-20</td>
                        <td><span class="status-inactive">已禁用</span></td>
                        <td>
                            <a href="#" class="button tiny">编辑</a>
                            <a href="#" class="button tiny alert">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7" class="text-right">共 3 条记录</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

表格最佳实践 ​

  1. 使用语义化标签：始终使用 <thead>、<tbody>、<tfoot> 来组织表格结构
  2. 提供表格标题：使用 <caption> 或 heading 元素说明表格用途
  3. 响应式考虑：对于复杂表格，使用 .stack 或 .table-scroll
  4. 可访问性：使用 scope 属性帮助屏幕阅读器理解表格结构
html
<table>
    <caption>2024年季度销售报表</caption>
    <thead>
        <tr>
            <th scope="col">季度</th>
            <th scope="col">销售额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1</th>
            <td>¥100万</td>
        </tr>
    </tbody>
</table>

总结 ​

本章我们学习了：

  • 基本表格的创建
  • 悬停和条纹效果
  • 响应式表格（堆叠和滚动）
  • 单元格的对齐和合并
  • 自定义表格样式
  • 表格的最佳实践

下一章，我们将学习 Foundation 按钮。

提示：在移动设备上测试你的表格，确保数据在小屏幕上仍然可读。