Semantic-UI Table Variations
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
.png)
.png)