Open In App

Semantic-UI Table Collapsing Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. It can be used to compare two or more items in the tabular form layout. Tables are used to create databases. An HTML table and a Semantic UI table both are the same structurally. In the case of Collapsing Variation, a table takes up only as much space as its rows.

Semantic UI Table Collapsing Variation Classes:

  • table: This class creates a table in Semantic UI.
  • collapsing: This class enables the table to take up as much space as its rows.
  • celled: This class divides each row of our table into separate cells.

Syntax:

<table class="ui collapsing table">
    <tr>
        <td></td>
        ...
    </tr>
    ...
</table>

Example 1: This is a basic example illustrating the difference between a normal table and a Table Collapsing Variation made using Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Comment Types</title>
    <link href=
    rel="stylesheet" />
  
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
        </script>
  
    <script src=
    </script>
</head>
  
<body>
  
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <!DOCTYPE html>
        <html>
  
        <head>
            <title>Semantic UI Table Collapsing Variation</title>
            <link href=
            rel="stylesheet" />
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"
                integrity=
            "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"
            </script>
            <script src=
            </script>
        </head>
  
        <body>
            <center>
                <h1 class="ui green header">GeeksforGeeks</h1>
                <strong>Semantic UI Table Collapsing Variation</strong>
            </center>
            <b>Normal table</b>
            <table class="ui table">
                <thead>
                    <tr>
                        <th>Data Structures</th>
                        <th>Access</th>
                        <th>Insertion</th>
                        <th>Deletion</th>
                        <th>Search</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Array</td>
                        <td>O(1)</td>
                        <td>O(n)</td>
                        <td>O(n)</td>
                        <td>O(n)</td>
                    </tr>
                    <tr>
                        <td>LinkedList</td>
                        <td>O(n)</td>
                        <td>O(1)</td>
                        <td>O(1)</td>
                        <td>O(n)</td>
                    </tr>
                    <tr>
                        <td>HashMap</td>
                        <td>N/A</td>
                        <td>O(1)</td>
                        <td>O(1)</td>
                        <td>O(1)</td>
                    </tr>
                </tbody>
            </table>
            <b>Collapsed Table</b>
            <table class="ui collapsing table">
                <thead>
                    <tr>
                        <th>Data Structures</th>
                        <th>Access</th>
                        <th>Insertion</th>
                        <th>Deletion</th>
                        <th>Search</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Array</td>
                        <td>O(1)</td>
                        <td>O(n)</td>
                        <td>O(n)</td>
                        <td>O(n)</td>
                    </tr>
                    <tr>
                        <td>LinkedList</td>
                        <td>O(n)</td>
                        <td>O(1)</td>
                        <td>O(1)</td>
                        <td>O(n)</td>
                    </tr>
                    <tr>
                        <td>HashMap</td>
                        <td>N/A</td>
                        <td>O(1)</td>
                        <td>O(1)</td>
                        <td>O(1)</td>
                    </tr>
                </tbody>
            </table>
        </body>
  
        </html>
        <h4>Semantic UI Comment Types</h4>
        <hr>
        <br />
        <div class="ui comments">
            <h2 class="ui dividing header">Comments</h2>
            <div class="comment">
                <a class="avatar">
                    <img src=
                </a>
                <div class="content">
                    <a class="author">Mr. Anonymous</a>
                    <div class="text">
                        I am watching you. I know all about you.
                    </div>
                    <div class="actions">
                        <a class="reply">Reply</a>
                    </div>
                </div>
            </div>
            <div class="comment">
                <a class="avatar">
                    <img src=
                </a>
                <div class="content">
                    <a class="author">Praneeth</a>
                    <div class="text">
                        Lol. You know nothing about me.
                    </div>
                    <form class="ui reply form">
                        <div class="field">
                            <textarea></textarea>
                        </div>
                        <div class="ui primary submit labeled icon button">
                            <i class="icon edit"></i> Add Reply
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  
</body>
  
</html>


Output:

Example 2: This is a basic example illustrating Striped Table Collapsing Variation made using Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Table Collapsing Variation</title>
    <link href=
    rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous"> </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic UI Table Collapsing Variation</strong>
    </center>
    <b>Striped Collapsed Table</b>
    <table class="ui collapsing striped table">
        <thead>
            <tr>
                <th>Data Structures</th>
                <th>Access</th>
                <th>Insertion</th>
                <th>Deletion</th>
                <th>Search</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Array</td>
                <td>O(1)</td>
                <td>O(n)</td>
                <td>O(n)</td>
                <td>O(n)</td>
            </tr>
            <tr>
                <td>LinkedList</td>
                <td>O(n)</td>
                <td>O(1)</td>
                <td>O(1)</td>
                <td>O(n)</td>
            </tr>
            <tr>
                <td>HashMap</td>
                <td>N/A</td>
                <td>O(1)</td>
                <td>O(1)</td>
                <td>O(1)</td>
            </tr>
            <tr>
                <td>AVL Tree</td>
                <td>O(log n)</td>
                <td>O(log n)</td>
                <td>O(log n)</td>
                <td>O(log n)</td>
            </tr>
        </tbody>
    </table>
</body>
  
</html>


Output:

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



Last Updated : 22 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads