Open In App

Semantic-UI Table Inverted 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.

Using Inverted variation a table’s colors can be inverted.

Semantic UI Table Inverted Variation Class:

  • inverted: This class inverts the color of our table.

Syntax:

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

Note: In the above syntax, instead of the “red” color, any other color can be used as per the need.

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

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI Table Inverted Variation</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 Inverted Variation</strong>
        </center>
        <table class="ui teal inverted table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Approved</td>
                <td>None</td>
              </tr>
              <tr>
                <td>Jamie</td>
                <td>Approved</td>
                <td>Requires call</td>
              </tr>
            </tbody>
          </table>
          <table class="ui olive inverted table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Approved</td>
                <td>None</td>
              </tr>
              <tr>
                <td>Jamie</td>
                <td>Approved</td>
                <td>Requires call</td>
              </tr>
            </tbody>
          </table>
          <table class="ui purple inverted table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Approved</td>
                <td>None</td>
              </tr>
              <tr>
                <td>Jamie</td>
                <td>Approved</td>
                <td>Requires call</td>
              </tr>
            </tbody>
          </table>
    </body>
</html>


Output:

Semantic-UI Table Inverted Variation

Semantic-UI Table Inverted Variation

Example 2: This is a basic example illustrating table colors inverted variation created using Semantic UI.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI Table Inverted Variation</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 Inverted Variation</strong>
        </center>
        <table class="ui red inverted table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Approved</td>
                <td>None</td>
              </tr>
              <tr>
                <td>Jamie</td>
                <td>Approved</td>
                <td>Requires call</td>
              </tr>
            </tbody>
          </table>
          <table class="ui blue inverted table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Approved</td>
                <td>None</td>
              </tr>
              <tr>
                <td>Jamie</td>
                <td>Approved</td>
                <td>Requires call</td>
              </tr>
            </tbody>
          </table>
          <table class="ui violet inverted table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Approved</td>
                <td>None</td>
              </tr>
              <tr>
                <td>Jamie</td>
                <td>Approved</td>
                <td>Requires call</td>
              </tr>
            </tbody>
          </table>
    </body>
</html>


Output:

Semantic-UI Table Inverted Variation

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



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