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. It uses a class to add CSS to the elements.
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. Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. It can be used to compare two or more items in the tabular form layout. Tables are used to create databases. An HTML table and a Semantic UI table both are the same structurally.
Semantic UI Table Types:
- Table: This table type creates a normal Semantic UI table using table class
- Definition: This table type is formatted to emphasize a first column that defines the content of the row using definition class.
- Structured: This table type is formatted to display complex structured data using structured class.
Syntax:
<table class="ui table table-type-class">
<tr>
<td>...</td>
...
</tr>
...
</table>Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: This is a basic example illustrating the table type class created using Semantic UI.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Table Types</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic-UI Table Types</strong>
</center>
<b>Table Type</b>
<table class="ui 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>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log 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>
</body>
</html>
|
Output:
Semantic-UI Table Types
Example 2: This is a basic example illustrating the definition type class created using Semantic UI.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Table Types</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic-UI Table Types</strong>
</center>
<b>Definition Type</b>
<table class="ui definition table celled">
<thead>
<tr><th></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>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log 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>
</body>
</html>
|
Output:
Semantic-UI Table Types
Example 3: This is a basic example illustrating a structured type class created using Semantic UI.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Table Types</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic-UI Table Types</strong>
</center>
<b>Structured Type</b>
<table class="ui celled structured table">
<thead>
<tr>
<th rowspan="2">Type</th>
<th rowspan="2">Name</th>
<th rowspan="2">No.of.Questions</th>
<th colspan="3">Difficulty</th>
</tr>
<tr>
<th>Easy</th>
<th>Medium</th>
<th>Hard</th>
</tr>
</thead>
<tbody>
<tr>
<td>Non-Linear Data Structures</td>
<td>Trees</td>
<td class="right aligned">2</td>
<td class="center aligned">
<i class="large green checkmark icon"></i>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">Linear Data Structures</td>
<td>Arrays</td>
<td class="right aligned">52</td>
<td class="center aligned">
<i class="large green checkmark icon"></i>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Stacks</td>
<td class="right aligned">12</td>
<td></td>
<td class="center aligned">
<i class="large green checkmark icon"></i>
</td>
<td></td>
</tr>
<tr>
<td>Queues</td>
<td class="right aligned">21</td>
<td class="center aligned">
<i class="large green checkmark icon"></i>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Semantic-UI Table Types
Reference: https://semantic-ui.com/collections/table.html