Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Blaze UI Basic Tables se usa para crear la tabla con la ayuda de filas y columnas para almacenar los datos tabulares. Para crear la tabla en Blaze UI, usaremos las siguientes clases.
Clases de tablas básicas de Blaze UI:
- c-table: Esta clase se utiliza para crear la tabla.
- c-table__caption: esta clase se utiliza para crear el título de la tabla.
- c-table__head: esta clase se utiliza para crear el encabezado de la tabla.
- c-table__row: esta clase se utiliza para crear la fila de la tabla.
- c-table__row–heading: esta clase se utiliza para crear el encabezado de la fila de la tabla.
- c-table__cell: esta clase se utiliza para crear la celda de la tabla.
Sintaxis:
<table class="c-table"> ... </table>
Ejemplo 1: este ejemplo muestra las tablas básicas de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basic Tables </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Basic Tables </h3> <table class="c-table"> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell"> Name </th> <th class="c-table__cell"> Marks </th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row"> <td class="c-table__cell"> Amit </td> <td class="c-table__cell"> 98 </td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> Rohan </td> <td class="c-table__cell"> 86 </td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> Rajit </td> <td class="c-table__cell"> 91 </td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Tablas básicas de la interfaz de usuario de Blaze
Ejemplo 2: este ejemplo demuestra las tablas básicas de la interfaz de usuario de Blaze con títulos de tabla y enlaces.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basic Tables </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Basic Tables </h3> <table class="c-table"> <caption class="c-table__caption"> GeeksforGeeks Basic Table </caption> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell"> Header 1 </th> <th class="c-table__cell"> Header 2 </th> <th class="c-table__cell"> Header 3 </th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row"> <td class="c-table__cell"> Java </td> <td class="c-table__cell"> C++ </td> <td class="c-table__cell"> <a href=""> GFG </a> </td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> <a href=""> GeeksforGeeks </a> </td> <td class="c-table__cell"> Dart </td> <td class="c-table__cell"> Javascript </td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> Python </td> <td class="c-table__cell"> <a href=""> GeeksforGeeks.org </a> </td> <td class="c-table__cell"> Flutter </td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Tablas básicas de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/tables/
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA