Semantic-UI Table Column Width Variation
Last Updated :
16 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 Width Variation, we can specify the width of individual columns independently.
Semantic UI Table Column Width Variation Class:
- wide: This class helps us to set the width between individual columns.
Syntax:
<table class="ui number* wide table">
<tr>
<td></td>
...
</tr>
...
</table>
Note: The number* can be anything depending on the width you want.
Example 1: This is a basic example illustrating the difference between a normal table and a Table Column Width Variation made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Column Width Variation</title>
<link href=
rel="stylesheet" />
<script
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Column Width Variation</strong>
</center>
<b>Normal Semantic UI Table</b>
<table class="ui table">
<thead>
<tr>
<th>Name</th>
<th>Date Joined</th>
<th>E-mail</th>
<th>Called</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<b>Column Width Variation Table</b>
<table class="ui table">
<thead>
<tr>
<th class="two wide">Name</th>
<th class="three wide">Date Joined</th>
<th class="four wide">E-mail</th>
<th>Called</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Semantic-UI Table Column Width Variation
Example 2: This is a basic example illustrating Striped Table Column Width Variation made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Column Width 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 Column Width Variation</strong>
</center>
<b>Striped Column Width Variation Table</b>
<table class="ui table striped">
<thead>
<tr>
<th class="two wide">Name</th>
<th class="three wide">Date Joined</th>
<th class="four wide">E-mail</th>
<th class="four wide">Called</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Semantic-UI Table Column Width Variation
Reference: https://semantic-ui.com/collections/table.html#column-width
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...