Skip to content
Related Articles

Related Articles

Semantic-UI Table States

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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.

Tables are an essential part of any website to represent the data in an easier way ie., organized & render the collections of data grouped into rows. The Semantic UI framework provides the facility to create tables with ease. There are times when we have to create tables in a certain manner such as a table with a particular state.  Here the state of a table means whether a particular row of the table is selected or has any error or a warning, etc. These desired results can be achieved with the help of table states in the Semantic-UI framework that is used to modify the tables.

Semantic-UI Table States:

  • Positive/Negative: A cell or row determines whether a value is good or bad.
  • Warning: A cell or row warns the user.
  • Active: A cell or row is active when selected by a user.
  • Disabled: A cell or row can be disabled so the user cannot select it.
  • Error: A cell or row gives attention to an error.

Syntax:   

<table class="ui celled table">
    <tr class="warning">
        <td> Content </td>
    </tr>
</table>

The syntax for all the other table states will be the same, and the only difference will be the state name.

Example 1: This example illustrates the Table States in Semantic-UI by specifying the state as positive/negative & Error.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
 
<body>
    <br>
    <div class="ui green huge header">
        GeeksforGeeks
    </div>
    <div class="ui large header">
        Semantic-UI Tables State
    </div>
    <table class="ui celled table">
         
        <!-- Table Created-->
        <thead>
             
            <!-- Table Headings-->
            <tr>
                <th>Name</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr class="positive">
                 
                <!-- Positive State-->
                <td>Jeff</td>
                <td>
                    <i class="icon checkmark"></i>Passed
                </td>
            </tr>
            <tr class="positive">
                <td>John</td>
                <td>
                    <i class="icon checkmark"></i> Passed
                </td>
            </tr>
            <tr>
                <td>Shawn</td>
                <td class="negative">
                    <i class="icon close"></i>Failed
                </td>
                 
                <!--Negative State -->
            </tr>
            <tr>
                <td>Kane</td>
                <td>Pending</td>
            </tr>
            <tr class="error">
                 
                <!-- Error State-->
                <td>Randy</td>
                <td class="error">
                    <i class="attention icon"></i> Not Found
                </td>
            </tr>
            <tr>
                <td>Brock</td>
                <td>Pending</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


Output:

Table States in Semantic-UI

Example 2: This example describes the Table States in Semantic-UI by specifying the state as a warning, active & disabled.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
 
<body>
    <br>
    <div class="ui green huge header">
        GeeksforGeeks
    </div>
    <div class="ui large header">
        Semantic-UI Tables State
    </div>
    <table class="ui celled table">
         
        <!-- Table Created-->
        <thead>
             
            <!-- Table Headings-->
            <tr>
                <th>Name</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr class="warning">
                 
                <!-- Warning State-->
                <td>Jeff</td>
                <td>
                    <i class="attention icon"></i> Unavailable
                </td>
            </tr>
            <tr class="active">
                 
                <!--Active State-->
                <td>John</td>
                <td>Passed</td>
            </tr>
            <tr class="disabled">
                 
                <!-- Disabled State-->
                <td>Shawn</td>
                <td>Failed</td>
            </tr>
            <tr>
                <td>Kane</td>
                <td>Pending</td>
            </tr>
            <tr class="disabled">
                 
                <!-- Disabled State-->
                <td>Randy</td>
                <td>Failed</td>
            </tr>
            <tr>
                <td>Brock</td>
                <td>Pending</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


Output:

Table States in Semantic-UI

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!