Open In App

Semantic-UI Table Active State

Last Updated : 14 Mar, 2022
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.

Active state sets cell or row to be active or selected by a user.

Semantic UI Table Active state class:

  • active: This class sets a cell or row to an active state.

Syntax:

<table class="ui celled table">
    <tr class="active">
         <td></td>
         ...
    </tr>
    ...
</table>

Example 1: This is a basic example illustrating the table’s active state.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Table Active state</title>
    <link href=
         rel="stylesheet" />
    <script src=
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
          crossorigin="anonymous"
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic UI Table Active state</strong>
    </center>
        <table class="ui table">
            <thead>
              <tr><th></th>
              <th>Access</th>
              <th>Insertion</th>
              <th>Deletion</th>
              <th>Search</th>
            </tr></thead>
            <tbody>
              <tr>
                <td>Array</td>
                <td class="active">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 class="active">O(1)</td>
                <td class="active">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 class="active">O(1)</td>
                <td class="active">O(1)</td>
                <td class="active">O(1)</td>
              </tr>
          </tbody>
        </table>
 </body>
</html>


Output:

Example 2: This is a basic example illustrating the celled table active state.

HTML




<!DOCTYPE html>
<html>
<head>
        <title>Semantic UI Table Active state</title>
        <link href
             rel="stylesheet" />
        <script src=
              integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"
       </script>
        <script src=
        </script>
</head>
<body>
        <center>
            <h1 class="ui green header">GeeksforGeeks</h1>
            <strong>Semantic UI Table Active state</strong>
        </center>
        <table class="ui table celled">
            <thead>
              <tr><th></th>
              <th>Access</th>
              <th>Insertion</th>
              <th>Deletion</th>
              <th>Search</th>
            </tr></thead>
            <tbody>
              <tr>
                <td>Array</td>
                <td class="active">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 class="active">O(1)</td>
                <td class="active">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 class="active">O(1)</td>
                <td class="active">O(1)</td>
                <td class="active">O(1)</td>
              </tr>
          </tbody>
        </table>
    </body>
</html>


Output:

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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads