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 Tables Using Divs se utiliza para crear la tabla mediante divs en lugar de tr, th y td . Podemos crear la tabla usando divs usando las siguientes clases.
Tablas de interfaz de usuario de Blaze usando clases de divs:
- c-table: Esta clase se usará para hacer la tabla.
- c-table–striped: Esta clase se usará para hacer la tabla rayada.
- c-table__row–heading: Esta clase se usará para hacer el encabezado de la fila.
- c-table__caption: esta clase se usará para hacer el título de la tabla.
- c-table__head: esta clase se usará para hacer el encabezado de la tabla.
- c-table__row: esta clase se usará para hacer la fila de la tabla.
- c-table__cell: esta clase se usará para hacer la celda de la tabla.
- c-table__column: Esta clase se usará para hacer la columna de la tabla.
Sintaxis:
<div class="c-table"> ... </div>
Ejemplo 1: este ejemplo muestra las tablas de la interfaz de usuario de Blaze mediante divisiones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Tables Using Divs </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 Tables Using Divs </h3> <div class="c-table c-table--striped"> <div class="c-table__caption"> GFG Striped Table using divs </div> <div class="c-table__row c-table__row--heading"> <span class="c-table__cell"> Name </span> <span class="c-table__cell"> Percentage </span> </div> <div class="c-table__row"> <span class="c-table__cell"> Kamal </span> <span class="c-table__cell"> 85% </span> </div> <div class="c-table__row"> <span class="c-table__cell"> Mukul </span> <span class="c-table__cell"> 98% </span> </div> <div class="c-table__row"> <span class="c-table__cell"> Rajendra </span> <span class="c-table__cell"> 84% </span> </div> </div> </div> </body> </html>
Producción:
Tablas de la interfaz de usuario de Blaze mediante divisiones
Ejemplo 2: este ejemplo muestra las tablas de la interfaz de usuario de Blaze mediante divisiones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Tables Using Divs </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 Tables Using Divs </h3> <div class="c-table c-table--condensed"> <div class="c-table__caption"> GFG Condensed Table using divs </div> <div class="c-table__row c-table__row--heading"> <span class="c-table__cell"> Header 1 </span> <span class="c-table__cell"> Header 2 </span> <span class="c-table__cell"> Header 3 </span> </div> <div class="c-table__row"> <span class="c-table__cell"> <a href=""> GFG Courses </a> </span> <span class="c-table__cell"> Articles </span> <span class="c-table__cell"> <a href=""> Java course </a> </span> </div> <div class="c-table__row"> <span class="c-table__cell"> <a href=""> GeeksforGeeks website </a> </span> <span class="c-table__cell"> Python </span> <span class="c-table__cell"> Dart </span> </div> <div class="c-table__row"> <span class="c-table__cell"> <a href=""> Javascript course </a> </span> <span class="c-table__cell"> Flutter </span> <span class="c-table__cell"> Node.js </span> </div> </div> </div> </body> </html>
Producción:
Tablas de la interfaz de usuario de Blaze mediante divisiones
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