Semantic-UI Table Selectable Cell Variation

Last Updated : 24 Mar, 2022

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 Selectable Cell variation, we can make a table cell selectable, we do this by using anchor tags which enable the cell to be selectable, and also these links by default will inherit their cell color.

Semantic UI Table Selectable Cell Variation Class:

selectable: This class enables a cell of the table to be selectable.

Syntax:

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

Example 1: This is a basic example illustrating Table Selectable Cell variation created using Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic-UI Table Selectable Cell Variation</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
             rel="stylesheet" />       
    </head> 
    <body> 
        <center> 
            <h1 class="ui green header">GeeksforGeeks</h1> 
            <strong>Semantic-UI Table Selectable Cell Variation</strong> 
        </center> 
        <table class="ui celled 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 class="selectable"><a>O(1)</a></td> 
                <td>O(n)</td> 
                <td>O(n)</td> 
                <td>O(n)</td> 
              </tr> 
              <tr> 
                <td>LinkedList</td> 
                <td>O(n)</td> 
                <td class="selectable"><a>O(1)</a></td> 
                <td>O(1)</td> 
                <td>O(n)</td> 
              </tr> 
              <tr> 
                <td>AVL Tree</td> 
                <td>O(log n)</td> 
                <td>O(log n)</td> 
                <td class="selectable"><a>O(log n)</a></td> 
                <td>O(log n)</td> 
              </tr> 
              <tr> 
                <td>HashMap</td> 
                <td>N/A</td> 
                <td>O(1)</td> 
                <td>O(1)</td> 
                <td class="selectable"><a>O(1)</a></td> 
              </tr> 
              <tr> 
                <td>AVL Tree</td> 
                <td class="selectable"><a>O(log n)</a></td> 
                <td>O(log n)</td> 
                <td>O(log n)</td> 
                <td>O(log n)</td> 
              </tr> 
          </tbody> 
        </table> 
    </body> 
</html>

Output:

Example 2: This is a basic example illustrating Collapsing Table Selectable Cell variation created using Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic-UI Table Selectable Cell Variation</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
             rel="stylesheet" />        
    </head> 
    <body> 
        <center> 
            <h1 class="ui green header">GeeksforGeeks</h1> 
            <strong>Semantic-UI Table Selectable Cell Variation</strong> 
        </center> 
        <table class="ui celled table collapsing"> 
            <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 class="selectable positive"><a>O(1)</a></td> 
                <td>O(n)</td> 
                <td class="negative">O(n)</td> 
                <td>O(n)</td> 
              </tr> 
              <tr> 
                <td>LinkedList</td> 
                <td class="negative">O(n)</td> 
                <td class="selectable"><a>O(1)</a></td> 
                <td class="positive">O(1)</td> 
                <td class="negative">O(n)</td> 
              </tr> 
              <tr> 
                <td>AVL Tree</td> 
                <td>O(log n)</td> 
                <td>O(log n)</td> 
                <td class="selectable positive"><a>O(log n)</a></td> 
                <td>O(log n)</td> 
              </tr> 
              <tr> 
                <td>HashMap</td> 
                <td>N/A</td> 
                <td class="positive">O(1)</td> 
                <td>O(1)</td> 
                <td class="selectable positive"><a>O(1)</a></td> 
              </tr> 
              <tr> 
                <td>AVL Tree</td> 
                <td class="selectable negative"><a>O(log n)</a></td> 
                <td>O(log n)</td> 
                <td class="negative">O(log n)</td> 
                <td>O(log n)</td> 
              </tr> 
          </tbody> 
        </table> 
    </body> 
</html>