Semantic-UI Table

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.

Output:

👁 Image

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