Tablas de interfaz de usuario de Blaze Tabla a rayas

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.

La tabla rayada de Blaze UI Tables se usa para crear la tabla rayada con la ayuda de filas y columnas para almacenar los datos. Para crear la tabla rayada, usaremos la clase modificadora c-table-striped .

Blaze UI Tables Clase de tabla a rayas:

  • c-table–striped: Esta clase se usará para hacer la tabla rayada.

Sintaxis:

<table class="c-table c-table--striped">
   ...
</table>

Ejemplo 1: este ejemplo muestra la tabla rayada de Blaze UI Tables.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Tables Striped Table </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 Striped Table </h3>
  
        <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"> 
                        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"> 
                        Akash 
                    </td>
                    <td class="c-table__cell"> 
                        75 
                    </td>
                </tr>
                <tr class="c-table__row">
                    <td class="c-table__cell"> 
                        Ajay 
                    </td>
                    <td class="c-table__cell"> 
                        68 
                    </td>
                </tr>
                <tr class="c-table__row">
                    <td class="c-table__cell"> 
                        Kapil 
                    </td>
                    <td class="c-table__cell"> 
                        61 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>

Producción:

Tablas de interfaz de usuario de Blaze Tabla a rayas

Ejemplo 2: este ejemplo muestra la tabla rayada de tablas de la interfaz de usuario de Blaze con título de tabla y enlaces.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Tables Striped Table </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 Striped Table </h3>
  
        <table class="c-table c-table--striped">
            <caption class="c-table__caption"> 
                GeeksforGeeks Striped 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"> 
                        <a href=""> Articles </a> 
                    </td>
                    <td class="c-table__cell"> 
                        GeeksforGeeks 
                    </td>
                    <td class="c-table__cell"> 
                        <a href=""> Python course </a> 
                    </td>
                </tr>
  
                <tr class="c-table__row">
                    <td class="c-table__cell"> 
                        <a href=""> Java course </a> 
                    </td>
                    <td class="c-table__cell"> 
                        Flutter 
                    </td>
                    <td class="c-table__cell"> 
                        Javascript 
                    </td>
                </tr>
  
                <tr class="c-table__row">
                    <td class="c-table__cell"> 
                        Dart 
                    </td>
                    <td class="c-table__cell"> 
                        <a href=""> GFG website </a> 
                    </td>
                    <td class="c-table__cell"> 
                        Java 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>

Producción:

Tablas de interfaz de usuario de Blaze Tabla a rayas

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *