Tablas de interfaz de usuario de Blaze resumidas

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 Condensed se usa para crear la tabla condensada con texto pequeño y tabla usando la clase de modificador c-table–condensed . El tamaño de fuente es más pequeño en comparación con el tamaño de fuente predeterminado.

Clases condensadas de tablas de interfaz de usuario de Blaze:

  • c-table–condensed: Esta clase se usa para hacer la tabla condensada.

Sintaxis:

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

Ejemplo 1: este ejemplo demuestra las tablas de la interfaz de usuario de Blaze resumidas.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Tables Condensed </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 Condensed </h3>
  
        <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">
                        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"> 
                        Rohit 
                    </td>
                    <td class="c-table__cell"> 
                        97 
                    </td>
                </tr>
                
                <tr class="c-table__row">
                    <td class="c-table__cell"> 
                        Harish 
                    </td>
                    <td class="c-table__cell"> 
                        86 
                    </td>
                </tr>
                
                <tr class="c-table__row">
                    <td class="c-table__cell"> 
                        Rakesh 
                    </td>
                    <td class="c-table__cell"> 
                        79 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>

Producción:

Tablas de interfaz de usuario de Blaze resumidas

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

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Tables Condensed </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 Condensed </h3>
  
        <table class="c-table c-table--condensed">
            <caption class="c-table__caption"> 
                GeeksforGeeks Condensed 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=""> GFG Courses </a> 
                    </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">
                        <a href=""> Python course </a>
                    </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 de interfaz de usuario de Blaze resumidas

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 *