Semantic-UI Table Vertical Alignment Variation
Last Updated :
21 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.
Table Vertical Alignment variation is helpful in vertically aligning a table header, row, or cell.
Semantic UI Table Vertical Alignment Variation Classes:
- top aligned: This class aligns a table cell or a row on the top vertically.
- bottom aligned: This class aligns a table cell or a row at the bottom vertically.
- celled: This class divides each row of our table into separate cells.
Syntax:
<table class="ui table">
<tr>
<td class="top aligned">...</td>
...
</tr>
...
</table>
Example 1: This is a basic example illustrating different Table Vertical Alignment variations created using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Vertical Alignment Variation</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Vertical Alignment Variation</strong>
</center>
<table class="ui celled table">
<thead>
<tr>
<th>Names</th>
<th>Branch</th>
<th>Physics Marks</th>
<th>Chemistry Marks</th>
<th>Computer Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td class="top aligned">Ravi</td>
<td class="bottom aligned">CSE</td>
<td>48<br>84<br>55<br>42</td>
<td>48<br>84<br>55<br>42</td>
<td>48<br>84<br>55<br>42</td>
</tr>
<tr>
<td class="bottom aligned">Srihita</td>
<td class="top aligned">ECE</td>
<td>55<br>97<br>74<br>49</td>
<td>55<br>97<br>74<br>49</td>
<td>55<br>97<br>74<br>49</td>
</tr>
<tr>
<td class="top aligned">Madhavi</td>
<td class="bottom aligned">EEE</td>
<td>85<br>25<br>54<br>74</td>
<td>85<br>25<br>54<br>74</td>
<td>85<br>25<br>54<br>74</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Semantic-UI Table Vertical Alignment Variation
Example 2: This is a basic example illustrating different Collapsing Striped Table Vertical Alignment variations created using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Vertical Alignment Variation</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Vertical Alignment Variation</strong>
</center>
<table class="ui celled table striped collapsing">
<thead>
<tr>
<th>Names</th>
<th>Branch</th>
<th>Physics Marks</th>
<th>Chemistry Marks</th>
<th>Computer Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td class="top aligned">Ravi</td>
<td class="bottom aligned">CSE</td>
<td>48<br>84<br>55<br>42</td>
<td>48<br>84<br>55<br>42</td>
<td>48<br>84<br>55<br>42</td>
</tr>
<tr>
<td class="bottom aligned">Srihita</td>
<td class="top aligned">ECE</td>
<td>55<br>97<br>74<br>49</td>
<td>55<br>97<br>74<br>49</td>
<td>55<br>97<br>74<br>49</td>
</tr>
<tr>
<td class="top aligned">Madhavi</td>
<td class="bottom aligned">EEE</td>
<td>85<br>25<br>54<br>74</td>
<td>85<br>25<br>54<br>74</td>
<td>85<br>25<br>54<br>74</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Semantic-UI Table Vertical Alignment Variation
Reference: https://semantic-ui.com/collections/table.html#vertical-alignment
Share your thoughts in the comments
Please Login to comment...