基础 CSS 表
Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架,可以轻松设计美观的响应式网站、应用程序和电子邮件,这些网站、应用程序和电子邮件看起来很棒,并且可以在任何设备上访问。它被许多公司使用,例如 Facebook、eBay、Mozilla、Adobe,甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI,因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具,用于在移动设备上更快地呈现。
表格是一种组织大量数据的简单方法。表是行和列中的数据排列,或者可能是更复杂的结构。表格广泛用于交流、研究和数据分析。表格可用于各种任务,例如呈现文本信息和数字数据。它可用于比较表格形式布局中的两个或多个项目。表用于创建数据库。 HTML 表和语义 UI 表在结构上都是相同的。
基础 CSS 表:
- 基础:这是普通的 Foundation CSS 表。
- 悬停状态:这用于在悬停时使表格行稍微变暗。
- 条纹:这意味着表格中的行具有交替的白色和灰色背景颜色,看起来像条纹。
- Stacked Table:这是一种表格布局,它在小屏幕上将其单元格堆叠在一起,以使布局具有响应性。
- 滚动表:这可以在我们的表中进行水平滚动。
句法:
...
...
注意:通过使用上述类的组合,根据需要使用上述语法。请参阅下面的示例以更好地理解这些类。
示例 1:这是一个基本示例,说明了使用 Foundation CSS 创建的Table Basics 。
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Table Basics
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
HashMap
N/A
O(1)
O(1)
O(1)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Table Hover State
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
HashMap
N/A
O(1)
O(1)
O(1)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Table with Stripes
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
Table without Stripes
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Stacked Table
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Scrolling Table
Data Structures
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
HashMap
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
输出:
示例 2:这是一个基本示例,说明了使用 Foundation CSS 创建的悬停状态表。
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Table Hover State
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
HashMap
N/A
O(1)
O(1)
O(1)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
输出:
示例 3:这是一个基本示例,说明了使用 Foundation CSS 创建的Table Stripes 。
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Table with Stripes
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
Table without Stripes
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
输出:
示例 4:这是一个基本示例,说明了使用 Foundation CSS 创建的小型设备上的堆叠表。
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Stacked Table
Data Structures
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
输出:
示例 5:这是一个基本示例,说明了使用 Foundation CSS 创建的滚动表。
HTML
Foundation CSS Tables
GeeksforGeeks
Foundation CSS Tables
Scrolling Table
Data Structures
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Access
Insertion
Deletion
Search
Array
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
O(1)
O(n)
O(n)
O(n)
LinkedList
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
O(n)
O(1)
O(1)
O(n)
AVL Tree
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
O(log n)
HashMap
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
N/A
O(1)
O(1)
O(1)
输出:
参考: https://get.foundation/sites/docs/table.html