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.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container" > < br />< br /> < h2 class = "ui header green" >w3wiki</ 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:
Reference: https://semantic-ui.com/collections/table.html