Semantic-UI Table Colored Variation
Last Updated :
24 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.
Semantic UI Colored Variation gives our table a color that distinguishes the current table from others.
Semantic UI Table Colored Variation Classes:
- table: This class creates a table in Semantic UI.
- red: This class is used to set the color of the table into red.
- orange: This class is used to set the color of the table into orange.
- yellow: This class is used to set the color of the table into yellow.
- olive: This class is used to set the color of the table into olive.
- green: This class is used to set the color of the table into green.
- teal: This class is used to set the color of the table into teal.
- blue: This class is used to set the color of the table into blue.
- violet: This class is used to set the color of the table into violet.
- purple: This class is used to set the color of the table into the red.
- pink: This class is used to set the color of the table into pink.
- brown: This class is used to set the color of the table into brown.
- grey: This class is used to set the color of the table into grey.
Syntax:
<table class="ui color-class table">
<tr>
<td></td>
...
</tr>
...
</table>
Example 1: This is a basic example illustrating Table Colored Variation made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Colored Variation</title>
<link href=
<script src=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Colored Variation</strong>
</center>
<table class="ui teal table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
</tbody>
</table>
<table class="ui olive table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
</tbody>
</table>
<table class="ui purple table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Example 2: This is a basic example illustrating Table Colored Variation made using Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Table Colored Variation</title>
<link href=
<script src=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI Table Colored Variation</strong>
</center>
<table class="ui red table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
</tbody>
</table>
<table class="ui blue table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
</tbody>
</table>
<table class="ui violet table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/table.html#colored
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...