Semantic-UI Table Full-Width Header / Footer Variation
Last Updated :
25 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 case of Full-Width Header/Footer Variation the definition table has full width header or footer, filling in the gap left by the first column.
Semantic UI Table Full-Width Header/Footer Variation Classes:
- full-width: This class enables the header/footer of the table to take the entire width.
- celled: This class divides each row of our table into separate cells.
Syntax:
<table class="ui table">
<thead class="full-width">...</thead>
<tfoot class="full-width">...</tfoot>
</table>
Example 1: This is a basic example illustrating Table Full-Width Header/Footer Variation made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Full-Width Header/Footer Variation</title>
<link href=
rel="stylesheet"/>
<script src=
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Full-Width Header/Footer Variation</strong>
</center>
<table class="ui definition compact table celled">
<thead class="full-width">
<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>HashMap</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</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>
<tfoot class="full-width">
<tr>
<th>Best</th>
<th>Array</th>
<th>LinkedList</th>
<th>LinkedList</th>
<th>HashMap</th>
</tr>
</tfoot>
</table>
</body>
</html>
|
Output:
Semantic UI Table Full-Width Header/Footer Variation
Example 2: This is a basic example illustrating Striped Table Full-Width Header/Footer Variation made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Full-Width Header/Footer Variation</title>
<link href=
rel="stylesheet"/>
<script src=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Full-Width Header/Footer Variation</strong>
</center>
<table class="ui definition table celled striped">
<thead class="full-width">
<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>HashMap</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</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>
<tfoot class="full-width">
<tr>
<th>Best</th>
<th>Array</th>
<th>LinkedList</th>
<th>LinkedList</th>
<th>HashMap</th>
</tr>
</tfoot>
</table>
</body>
</html>
|
Output:
Semantic UI Table Full-Width Header/Footer Variation
Reference: https://semantic-ui.com/collections/table.html#full-width-header–footer
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...