Spectre Table elementos importantes de la sociedad de desarrollo web. Si desea mostrar algunos datos, definitivamente necesitará tablas. Las tablas Spectre son iguales a las tablas HTML.
En Spectre Table tenemos dos tipos de tablas, las tablas Scrollable y las tablas Stripped . Para las tablas desplazables, podemos usar table-scroll y para las tablas Stripped, podemos usar table-stripped.
Tipos de mesas Spectre: Hay dos tipos de mesas que también podemos mezclar.
- Tablas desplazables: esto se usa para crear la fila de la tabla que se puede desplazar verticalmente para que se pueda desplazar, necesitamos usar desplazamiento de tabla.
- Tablas despojadas: esto se usa para hacer que la fila de la tabla (la impar) se desnude para que sea rayada, necesitamos usar tablas despojadas.
Sintaxis:
<table class="table table-scroll|table-stripped"> ..... </table>
El siguiente ejemplo ilustra la tabla Spectre:
Ejemplo 1: en este ejemplo, crearemos tablas despojadas.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </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>
Producción:
Mesa de espectro
Ejemplo 2: en este ejemplo, crearemos tablas desplazables despojadas.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Tables Scrollable tables Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </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>
Producción:
Mesa de espectro
Referencia: https://picturepan2.github.io/spectre/elements/tables.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA