📜  Semantic-UI 表折叠变体

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

Semantic-UI 表折叠变体

Semantic UI是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。表格是一种组织大量数据的简单方法。表是行和列中的数据排列,或者可能是更复杂的结构。表格广泛用于交流、研究和数据分析。表格可用于各种任务,例如呈现文本信息和数字数据。它可用于比较表格形式布局中的两个或多个项目。表用于创建数据库。 HTML 表和语义 UI 表在结构上都是相同的。在Collapsing Variation 的情况下,表只占用与其行一样多的空间。

语义 UI 表折叠变体类:

  • table:这个类在语义 UI 中创建一个表。
  • collapsing:这个类使表格能够占用与其行一样多的空间。
  • celled:此类将表格的每一行划分为单独的单元格。

句法:


        ...
    
    ...

示例 1:这是一个基本示例,说明了普通表格和使用语义 UI 制作的表格折叠变体之间的区别。

HTML


  

    Semantic UI Comment Types
    
  
    
  
    

  

  
    
        

GeeksforGeeks

                                          Semantic UI Table Collapsing Variation                                                                         
                

GeeksforGeeks

                Semantic UI Table Collapsing Variation             
            Normal table                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
HashMapN/AO(1)O(1)O(1)
            Collapsed Table                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
HashMapN/AO(1)O(1)O(1)
                             

Semantic UI Comment Types

        
        
        
            

Comments

            
                                                                       
                    Mr. Anonymous                     
                        I am watching you. I know all about you.                     
                    
                        Reply                     
                
            
            
                                                                       
                    Praneeth                     
                        Lol. You know nothing about me.                     
                    
                        
                                                     
                        
                             Add Reply                         
                    
                
            
        
    
     


HTML


  

    Semantic UI Table Collapsing Variation
    
    
    

  

    
        

GeeksforGeeks

        Semantic UI Table Collapsing Variation     
    Striped Collapsed Table                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
HashMapN/AO(1)O(1)O(1)
AVL TreeO(log n)O(log n)O(log n)O(log n)
  


输出:

示例 2:这是一个基本示例,说明了使用语义 UI 制作的条带表折叠变体

HTML



  

    Semantic UI Table Collapsing Variation
    
    
    

  

    
        

GeeksforGeeks

        Semantic UI Table Collapsing Variation     
    Striped Collapsed Table                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
Data StructuresAccessInsertionDeletionSearch
ArrayO(1)O(n)O(n)O(n)
LinkedListO(n)O(1)O(1)O(n)
HashMapN/AO(1)O(1)O(1)
AVL TreeO(log n)O(log n)O(log n)O(log n)
  

输出:

参考: https://semantic-ui.com/collections/table.html#collapsing