Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.
Blaze UI Tables are used for displaying tabular data. Tables are very useful for showing records, attendance, and similar type of data. We can even set the header for the columns in the table.
Blaze UI Table Types:
- Basic Table: This type of table has a simple format and no styling. It can also have a heading row.
- Striped Table: This type of table data has CSS that appears the rows are striped alternatively.
- Condensed Table: This type of table data has CSS that has cells with minimal padding and margin.
- Clickable Table: This type of table allows the users to click the table.
- Clickable Row: This type of table allows the users to click the rows of the table.
- Table Using div: This type of table allows the users to create table by using divs instead of tr, th, and td.
Syntax: Create a table in blaze UI as follows:
<table class="c-table">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell">Title</th>
<th class="c-table__cell">Links</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">Item1</td>
<td class="c-table__cell">Link1</td>
</tr>
</tbody>
</table>Example 1: In the following example, we have a basic table with some data.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Tables</strong>
<br />
<br />
</center>
<table class="c-table">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell">Title</th>
<th class="c-table__cell">Link</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">Data Structures</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/data-structures/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Algorithms</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/fundamentals-of-algorithms/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Machine Learning</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/machine-learning/
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Output
Example 2: In the following example, we have a striped table with some data.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Tables</strong>
<br />
<br />
</center>
<table class="c-table c-table--striped">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell">Title</th>
<th class="c-table__cell">Link</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">Data Structures</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/data-structures/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Algorithms</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/fundamentals-of-algorithms/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Machine Learning</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/machine-learning/
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script></script>
</body>
</html>
|
Output
Example 3: In the following example, we have a condensed type of table.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Tables</strong>
<br />
<br />
</center>
<table class="c-table c-table--condensed">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell">Title</th>
<th class="c-table__cell">Link</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">Data Structures</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/data-structures/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Algorithms</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/fundamentals-of-algorithms/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Machine Learning</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/machine-learning/
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Output
Example 4: In the following example, we have a striped clickable table with some data in it.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Tables</strong>
<br />
<br />
</center>
<table class="c-table c-table--striped c-table--clickable">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell">Title</th>
<th class="c-table__cell">Link</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">Data Structures</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/data-structures/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Algorithms</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/fundamentals-of-algorithms/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Machine Learning</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/machine-learning/
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Output
Example 5: In the following example, we have a clickable row in the table with some data. It also has a disabled row.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Tables</strong>
<br/>
<br/>
</center>
<table class="c-table">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell">Title</th>
<th class="c-table__cell">Link</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row c-table__row--disabled">
<td class="c-table__cell">Data Structures</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/data-structures/
</a>
</td>
</tr>
<tr class="c-table__row c-table__row--clickable">
<td class="c-table__cell">Algorithms</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/fundamentals-of-algorithms/
</a>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">Machine Learning</td>
<td class="c-table__cell">
<a href=
geeksforgeeks.org/machine-learning/
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Output
Reference: https://www.blazeui.com/components/tables/