Skip to content
Related Articles

Related Articles

Semantic-UI Table

Improve Article
Save Article
  • Last Updated : 04 Apr, 2022
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. 

Semantic UI has a bunch of components for user interface design. One of them is the Table component. 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. 

Semantic UI Table Types:

  • Table: This is used to create a basic table using the table class.
  • Definition: This is used to define a table with the first row as table definition.
  • Structured: This is used to create a complex structured table.

Semantic UI Table States:

  • Positive/Negative: This state sets a cell or row to depict the correct or wrong value.
  • Error: This state sets a cell or row to depict an error value.
  • Warning: This state sets cells or rows to alert the user.
  • Active: This state sets cells or rows to be actively selected.
  • Disabled: This state sets a cell or row to be inactive for a user to interact.

Semantic-UI Table Variations:

  • Single line: This variation is used to display table content on a single line.
  • Fixed: This variation does not resize the table according to its content.
  • Stacking:  This variation is used to stack table content responsively.
  • Selectable Row: This variation is used to make a table row or rows appear selected.
  • Selectable Cell This variation is used to make the table cell appear selected.
  • Vertical Alignment: This variation allows the user to align table content vertically as per his requirement. 
  • Text Alignment: This variation allows the user to align table content horizontally as per his requirement.
  • Striped: This variation creates a table with contrasting colors to alternate rows.
  • Celled: This variation is used to compose each row into different cells.
  • Basic: This variation is used to create simple tables with very less styling to increase readability. 
  • Collapsing Cell: This variation is used to collapse table cell size equal to its content.
  • Column Count:  This variation allows the user to define the table column count beforehand.
  • Column Width: This variation is used to set table’s individual column’s width.
  • Collapsing: This variation is used to create tables with space equal to the number of rows defined.
  • Colored: This variation is used to give different colors to tables. 
  • Inverted: This variation is used to invert the table color.
  • Sortable: This variation allows the user to sort a table’s content by clicking on its header.
  • Full-Width Header / Footer: This variation is used to define the full-width header/footer to the table.
  • Padded: This variation is used to increase row padding to make rows more visible.
  • Compact: This variation is used to reduce row padding to make more rows visible on a single page. 
  • Size: This variation is used to create small or large tables.

Syntax:

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

The below example illustrates the different states of tables.

Example 1: This example describes the Table States in Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container">
        <br/><br/>
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b> <p>Semantic UI Table States</p></b>
        <hr>
        <table class="ui celled table">
            <!-- Table Created-->
            <thead>
                <tr>
                    <th>States Name</th>
                    <th>Output</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning">
                    <td>Warning </td>
                    <td><i class="attention icon"></i
                       Alerting the user
                    </td>
                </tr>
                <tr class="active">
                    <td>Active</td>
                    <td>Selected value</td>
                </tr>
                <tr class="disabled">
                    <td>Disabled</td>
                    <td>Disabled value</td>
                </tr>
                <tr class="error">
                    <td>Error</td>
                    <td>Error value</td>
                </tr>
                <tr class="positive">
                    <td>Positive</td>
                    <td>Positive value</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>


Output:

The Different States of Table

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!