📜  基础 CSS 表

📅  最后修改于: 2022-05-13 01:56:16.156000             🧑  作者: Mango

基础 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 StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(log n)O(log n)O(log n)O(log n)
HashMapN/AO(1)O(1)O(1)
AVL TreeO(log n)O(log n)O(log n)O(log n)
    


HTML


    
        Foundation CSS Tables
        
        
        
    
    
        
            

GeeksforGeeks

            

Foundation CSS Tables

         
        Table Hover State                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(log n)O(log n)O(log n)O(log n)
HashMapN/AO(1)O(1)O(1)
AVL TreeO(log n)O(log n)O(log n)O(log n)
    


HTML


    
        Foundation CSS Tables
        
        
        
    
    
        
            

GeeksforGeeks

            

Foundation CSS Tables

        
        Table with Stripes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(log n)O(log n)O(log n)O(log n)
        Table without Stripes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(log n)O(log n)O(log n)O(log n)
    


HTML


    
        Foundation CSS Tables
        
        
        
    
    
        
            

GeeksforGeeks

            

Foundation CSS Tables

        
        Stacked Table                                                                                                                                                                                                                                                                                                                                                                                                                                                      
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
    


HTML


    
        Foundation CSS Tables
        
        
        
    
    
        
            

GeeksforGeeks

            

Foundation CSS Tables

        
        Scrolling Table         
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Data StructuresAccessInsertionDeletionSearchAccessInsertionDeletionSearchAccessInsertionDeletionSearchAccessInsertionDeletionSearchAccessInsertionDeletionSearch
ArrayO(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)
LinkedListO(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 TreeO(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)
HashMapN/AO(1)O(1)O(1)N/AO(1)O(1)O(1)N/AO(1)O(1)O(1)N/AO(1)O(1)O(1)N/AO(1)O(1)O(1)
        
    


输出:

示例 2:这是一个基本示例,说明了使用 Foundation CSS 创建的悬停状态表

HTML



    
        Foundation CSS Tables
        
        
        
    
    
        
            

GeeksforGeeks

            

Foundation CSS Tables

         
        Table Hover State                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(log n)O(log n)O(log n)O(log n)
HashMapN/AO(1)O(1)O(1)
AVL TreeO(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 StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(log n)O(log n)O(log n)O(log n)
        Table without Stripes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
AVL TreeO(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 StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
    

输出:

示例 5:这是一个基本示例,说明了使用 Foundation CSS 创建的滚动表

HTML



    
        Foundation CSS Tables
        
        
        
    
    
        
            

GeeksforGeeks

            

Foundation CSS Tables

        
        Scrolling Table         
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Data StructuresAccessInsertionDeletionSearchAccessInsertionDeletionSearchAccessInsertionDeletionSearchAccessInsertionDeletionSearchAccessInsertionDeletionSearch
ArrayO(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)
LinkedListO(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 TreeO(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)
HashMapN/AO(1)O(1)O(1)N/AO(1)O(1)O(1)N/AO(1)O(1)O(1)N/AO(1)O(1)O(1)N/AO(1)O(1)O(1)
        
    

输出:

参考: https://get.foundation/sites/docs/table.html