Semantic-UI Table Variations

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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          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>