Semantic-UI Table Column Count Variation
Last Updated :
22 Mar, 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. 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. In the case of Column Count Variation, a table specifies its column count to divide its content evenly.
Semantic UI Table Column Count Variation Classes:
- table: This class creates a table in Semantic UI.
- column: This class helps to divide the content evenly based on column count.
- celled: This class divides each row of our table into separate cells.
Syntax:
<table class="ui number-class column table">
<tr>
<td></td>
...
</tr>
...
</table>
Example 1: This is a basic example illustrating the Table difference between a normal table and Column Count Variation Table made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Column Count Variation</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"> </script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Column Count Variation</strong>
</center>
<b>Normal Table</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>
</tbody>
</table>
<b>Column Count Variation Table</b>
<table class="ui five column 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>
</tbody>
</table>
</body>
</html>
|
Output:
Example 2: This is a basic example illustrating Table Striped Celled Column Count Variation Table made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Column Count Variation</title>
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"> </script>
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Column Count Variation</strong>
</center>
<table class="ui five column striped table celled">
<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:
Reference: https://semantic-ui.com/collections/table.html#column-count
Share your thoughts in the comments
Please Login to comment...