Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
Las tablas de la interfaz de usuario de Blaze se utilizan para mostrar datos tabulares. Las tablas son muy útiles para mostrar registros, asistencia y tipos de datos similares. Incluso podemos establecer el encabezado de las columnas de la tabla.
Tipos de tablas de la interfaz de usuario de Blaze:
- Mesa Básica : Este tipo de mesa tiene un formato simple y sin estilo. También puede tener una fila de encabezado.
- Tabla rayada : este tipo de datos de tabla tiene CSS que parece que las filas están rayadas alternativamente.
- Tabla condensada : este tipo de datos de tabla tiene CSS que tiene celdas con margen y relleno mínimos.
- Tabla en la que se puede hacer clic : este tipo de tabla permite a los usuarios hacer clic en la tabla.
- Fila en la que se puede hacer clic : este tipo de tabla permite a los usuarios hacer clic en las filas de la tabla.
- Tabla usando div : este tipo de tabla permite a los usuarios crear una tabla usando divs en lugar de tr, th y td.
Sintaxis: cree una tabla en la interfaz de usuario de Blaze de la siguiente manera:
<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>
Ejemplo 1 : En el siguiente ejemplo, tenemos una tabla básica con algunos datos.
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= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </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= "https://www.geeksforgeeks.org/data-structures/?ref=shm"> 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= "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"> 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= "https://www.geeksforgeeks.org/machine-learning/?ref=shm"> geeksforgeeks.org/machine-learning/ </a> </td> </tr> </tbody> </table> </div> </body> </html>
Producción
Ejemplo 2 : En el siguiente ejemplo, tenemos una tabla rayada con algunos datos.
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= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </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= "https://www.geeksforgeeks.org/data-structures/?ref=shm"> 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= "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"> 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= "https://www.geeksforgeeks.org/machine-learning/?ref=shm"> geeksforgeeks.org/machine-learning/ </a> </td> </tr> </tbody> </table> </div> <script></script> </body> </html>
Producción
Ejemplo 3 : En el siguiente ejemplo, tenemos un tipo de tabla condensada.
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= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </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= "https://www.geeksforgeeks.org/data-structures/?ref=shm"> 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= "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"> 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= "https://www.geeksforgeeks.org/machine-learning/?ref=shm"> geeksforgeeks.org/machine-learning/ </a> </td> </tr> </tbody> </table> </div> </body> </html>
Producción
Ejemplo 4: En el siguiente ejemplo, tenemos una tabla rayada en la que se puede hacer clic con algunos datos.
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= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </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= "https://www.geeksforgeeks.org/data-structures/?ref=shm"> 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= "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"> 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= "https://www.geeksforgeeks.org/machine-learning/?ref=shm"> geeksforgeeks.org/machine-learning/ </a> </td> </tr> </tbody> </table> </div> </body> </html>
Producción
Ejemplo 5 : En el siguiente ejemplo, tenemos una fila en la que se puede hacer clic en la tabla con algunos datos. También tiene una fila para discapacitados.
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= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </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= "https://www.geeksforgeeks.org/data-structures/?ref=shm"> 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= "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"> 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= "https://www.geeksforgeeks.org/machine-learning/?ref=shm"> geeksforgeeks.org/machine-learning/ </a> </td> </tr> </tbody> </table> </div> </body> </html>
Producción
Referencia: https://www.blazeui.com/components/tables/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA