Skip to content
Related Articles

Related Articles

Semantic-UI Table Variations

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 May, 2022

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. There are different variations of tables available in Semantic UI.

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="Table Variations Class">
  <tr>
      <td>...</td>
  </tr>
  ...
</table>

The below example illustrates the different variations of tables.

Example 1: This example describes some of the table variations in Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Table Variation</title>
    <link href=
          rel="stylesheet" />    
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
              <u>Semantic UI Table Variations</u>
          </strong>
          <br /><br />
        <strong>
            Colored, Celled, Large, Collapsing 
            Report Data Table
        </strong>
        <table class="ui yellow celled large collapsing table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                    <td>Rahul</td>
                    <td>Suraj</td>
                    <td>Nitin</td>
                    <td>Gourav</td>
                </tr>
                <tr>
                    <td>Total Marks</td>
                    <td>70 %</td>
                    <td>82 %</td>
                    <td>90 %</td>
                    <td>30 %</td>
                </tr>
                <tr>
                    <td >Status</td>
                    <td class="positive">Pass</td>
                    <td class="positive">Pass</td>
                    <td class="positive">Pass</td>
                    <td class="negative">Fail</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
</html>


Output:

Table Variations

Example 2: This example describes some of the table variations in Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Table Variation</title>
    <link href=
          rel="stylesheet" />    
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
              <u>Semantic UI Table Variations</u>
          </strong>
          <br /><br />
        <strong>
            Colored, Celled, Striped, Collapsing Table
        </strong>
        <table class="ui green celled collapsing striped 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>HashMap</td>
                    <td>N/A</td>
                    <td>O(1)</td>
                    <td>O(1)</td>
                    <td>O(1)</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
</html>


Output:

Table Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!