垦荒学园

English

简体中文

English

简体中文

Toggle theme

Foundation Tables ​

Foundation provides powerful table styles to create beautiful, responsive data tables. This chapter will introduce various usages of Foundation tables.

Basic Tables ​

Creating a basic table is very simple, just add the appropriate classes to the <table> tag:

html
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Zhang San</td>
            <td>25</td>
            <td>Beijing</td>
        </tr>
        <tr>
            <td>Li Si</td>
            <td>30</td>
            <td>Shanghai</td>
        </tr>
        <tr>
            <td>Wang Wu</td>
            <td>28</td>
            <td>Guangzhou</td>
        </tr>
    </tbody>
</table>

Table Style Variants ​

Hover Effect ​

Use the .hover class to add mouse hover effects:

html
<table class="hover">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>¥5999</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Smartphone</td>
            <td>¥3999</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

Striped Effect ​

Use the .striped class to create zebra striping effect:

html
<table class="striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Event</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2024-01-01</td>
            <td>New Year Event</td>
            <td>Completed</td>
        </tr>
        <tr>
            <td>2024-02-14</td>
            <td>Valentine's Day Promotion</td>
            <td>In Progress</td>
        </tr>
        <tr>
            <td>2024-03-08</td>
            <td>Women's Day Special</td>
            <td>Planned</td>
        </tr>
        <tr>
            <td>2024-05-01</td>
            <td>Labor Day Event</td>
            <td>Planned</td>
        </tr>
    </tbody>
</table>

Combined Styles ​

You can use multiple classes together:

html
<table class="hover striped">
    <!-- Has both hover and striped effects -->
</table>

Stacked Tables (Responsive) ​

On small screens, tables may be difficult to read. Use the .stack class to make tables stack vertically on small screens:

html
<table class="stack">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Zhang San</td>
            <td>Front-end Engineer</td>
            <td>Technology Department</td>
            <td>¥15000</td>
        </tr>
        <tr>
            <td>Li Si</td>
            <td>Product Manager</td>
            <td>Product Department</td>
            <td>¥18000</td>
        </tr>
    </tbody>
</table>

Scrollable Tables ​

Use the .table-scroll wrapper to create horizontally scrollable tables:

html
<div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Product Name</th>
                <th>Category</th>
                <th>Price</th>
                <th>Stock</th>
                <th>Supplier</th>
                <th>Date Added</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Wireless Bluetooth Earphone</td>
                <td>Electronics</td>
                <td>¥299</td>
                <td>500</td>
                <td>Technology Co., Ltd.</td>
                <td>2024-01-15</td>
                <td>For Sale</td>
            </tr>
            <!-- More rows... -->
        </tbody>
    </table>
</div>

Unstriped Tables ​

Use the .unstriped class to create clean, non-striped tables:

html
<table class="unstriped">
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Description text</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>Description text</td>
        </tr>
    </tbody>
</table>

Table Headers and Footers ​

Table Header (thead) ​

html
<table>
    <thead>
        <tr>
            <th width="200">Column Header 1</th>
            <th>Column Header 2</th>
            <th>Column Header 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data rows -->
    </tbody>
</table>
html
<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Product A</td>
            <td>10</td>
            <td>¥1000</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>5</td>
            <td>¥500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>15</td>
            <td>¥1500</td>
        </tr>
    </tfoot>
</table>

Cell Alignment ​

Text Alignment ​

html
<table>
    <thead>
        <tr>
            <th class="text-left">Left Align</th>
            <th class="text-center">Center Align</th>
            <th class="text-right">Right Align</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-left">Text</td>
            <td class="text-center">Text</td>
            <td class="text-right">Text</td>
        </tr>
    </tbody>
</table>

Vertical Alignment ​

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">Top Align</td>
        <td class="align-middle">Vertical Center</td>
        <td class="align-bottom">Bottom Align</td>
    </tr>
</table>

Merged Cells ​

Column Span (colspan) ​

html
<table>
    <thead>
        <tr>
            <th colspan="3">2024 Year Sales Report</th>
        </tr>
        <tr>
            <th>Quarter</th>
            <th>Sales</th>
            <th>Growth Rate</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>

Row Span (rowspan) ​

html
<table>
    <thead>
        <tr>
            <th>Department</th>
            <th>Employee</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Technology Department</td>
            <td>Zhang San</td>
            <td>Front-end Engineer</td>
        </tr>
        <tr>
            <td>Li Si</td>
            <td>Back-end Engineer</td>
        </tr>
        <tr>
            <td rowspan="2">Marketing Department</td>
            <td>Wang Wu</td>
            <td>Marketing Manager</td>
        </tr>
        <tr>
            <td>Zhao Liu</td>
            <td>Marketing Specialist</td>
        </tr>
    </tbody>
</table>

Custom Table Styles ​

Using Sass Variables ​

If using Sass, you can customize table styles:

scss
// Custom table variables
$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);

Custom CSS ​

html
<style>
    /* Custom table styles */
    .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 content -->
</table>

Complete Example: Data Table ​

html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Table Examples</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>User Management</h1>

        <div class="table-scroll">
            <table class="hover striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Registration Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>admin</td>
                        <td>admin@example.com</td>
                        <td>Administrator</td>
                        <td>2023-01-01</td>
                        <td><span class="status-active">Active</span></td>
                        <td>
                            <a href="#" class="button tiny">Edit</a>
                            <a href="#" class="button tiny alert">Delete</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>user1</td>
                        <td>user1@example.com</td>
                        <td>Regular User</td>
                        <td>2023-06-15</td>
                        <td><span class="status-pending">Pending</span></td>
                        <td>
                            <a href="#" class="button tiny">Edit</a>
                            <a href="#" class="button tiny alert">Delete</a>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>user2</td>
                        <td>user2@example.com</td>
                        <td>Regular User</td>
                        <td>2023-08-20</td>
                        <td><span class="status-inactive">Disabled</span></td>
                        <td>
                            <a href="#" class="button tiny">Edit</a>
                            <a href="#" class="button tiny alert">Delete</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7" class="text-right">Total 3 records</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>

Table Best Practices ​

  1. Semantic Tags: Always use <thead>, <tbody>, <tfoot> to organize table structure
  2. Table Captions: Use <caption> or heading elements to explain table purpose
  3. Responsive Design: For complex tables, use .stack or .table-scroll
  4. Accessibility: Use the scope attribute to help screen readers understand table structure
html
<table>
    <caption>2024 Year Quarterly Sales Report</caption>
    <thead>
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1</th>
            <td>¥100万</td>
        </tr>
    </tbody>
</table>

Summary ​

In this chapter, we learned:

  • Creating basic tables
  • Hover and striped effects
  • Responsive tables (stacking and scrolling)
  • Cell alignment and merging
  • Custom table styles
  • Table best practices

In the next chapter, we will learn about Foundation Buttons.

Tip: Test your tables on mobile devices to ensure data remains readable on small screens.

Content is for learning and research only.

Copyright 2026 Kenhuang Academy. All Rights Reserved. About