Spectre Table important elements of web development society. If you want to display some data then you will definitely require tables. Spectre tables are the same as HTML tables.
In Spectre Table we have two types of tables Scroll able tables and Stripped tables. For the Scrollable tables, we can use table-scroll and for Stripped tables, we can use table-stripped.
Spectre Table Types: There are two types of table we can mix them as well.
- Scrollable tables: This is used to create the table row vertically scroll-able to make it scroll-able we need to use table-scroll.
- Stripped tables: This is used to make the table row(odd one) stripped to make it striped we need to use table-stripped.
Syntax:
<table class="table table-scroll|table-stripped"> ..... </table>
Below example illustrate the Spectre Table:
Example 1: In this example, we will create Stripped tables.
HTML
<!DOCTYPE html><html>
<head>
<title>SPECTRE CSS Buttons Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Tables Stripped tables Class</strong>
<br>
<table class="table table-stripped">
<thead>
<tr>
<th>Name</th>
<th>Technology</th>
<th>Online Date</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>The fundamentals of Web</td>
<td>HTML, CSS & JS</td>
<td>14 feb 2022</td>
</tr>
<tr>
<td>Design of Web</td>
<td>Bootstrap & Tailwind</td>
<td>14 June 2022</td>
</tr>
<tr>
<td>Hard part of Web</td>
<td>Node.js & HTTP</td>
<td>14 Nov 2022</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
|
Output:
Spectre Table
Example 2: In this example we will create Scrollable Stripped tables.
HTML
<!DOCTYPE html><html>
<head>
<title>SPECTRE Tables Scrollable tables Class</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Tables Scrollable tables Class</strong>
<br>
<table class="table table-striped table-scroll">
<thead>
<tr>
<th>Name</th>
<th>Technology</th>
<th>Online Date</th>
<th>Mentor</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>The fundamentals of Web</td>
<td>HTML, CSS & JS</td>
<td>14 feb 2022</td>
<td>S.K Ladh IIT-Kanpur</td>
<td>2 Month</td>
</tr>
<tr>
<td>Design of Web</td>
<td>Bootstrap & Tailwind</td>
<td>14 June 2022</td>
<td>Sayan Mukherjee IIT-Kharaghpur</td>
<td>1 Month 10 Days</td>
</tr>
<tr>
<td>Hard part of Web</td>
<td>Node.js & HTTP</td>
<td>14 Nov 2022</td>
<td>Sandeep Jain IIT-Roorkee</td>
<td>2 Month</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
|
Output:
Spectre Table
Reference: https://picturepan2.github.io/spectre/elements/tables.html