Open In App
Related Articles

Semantic-UI Table Selectable Row Variation

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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.

Selectable row variation helps to have a table’s rows appear selectable.

Semantic UI Table Selectable Row Variation Classes:

  • selectable: This class helps to select a row.

Syntax:

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

Example 1: This is a basic example illustrating table selectable row variation created using Semantic UI.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Table Selectable Row Variation</title>
    <link href=
          rel="stylesheet" />     
</head>
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic-UI Table Selectable Row Variation</strong>
    </center>
    <table class="ui celled selectable 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>AVL Tree</td>
            <td>O(log n)</td>
            <td>O(log n)</td>
            <td>O(log n)</td>
            <td>O(log 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:

Semantic-UI Table Selectable Row Variation

Semantic-UI Table Selectable Row Variation

Example 2: This is a basic example illustrating collapsing table selectable row variation created using Semantic UI.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Table Selectable Row Variation</title>
    <link href=
         rel="stylesheet" />        
</head>
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic-UI Table Selectable Row Variation</strong>
     
        <table class="ui selectable celled 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 class="positive">O(1)</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>O(1)</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>O(log n)</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="positive">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>
    </center>
</body>
</html>

                    

Output:

Semantic-UI Table Selectable Row Variation

Semantic-UI Table Selectable Row Variation

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



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