Componentes Tablas de datos Componente de tablas de datos

Componente de tablas de datos

Un componente de tabla de datos receptivo con un diseño minimalista y plano, adecuado para sitios web comerciales / corporativos, con soporte para temas oscuros.

Vista previa

Código HTML

<div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800">
        <thead>
            <tr class="w-full bg-gray-200 dark:bg-gray-700">
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
        </tbody>
    </table>
</div>

Componentes relacionados

Skeuomorphic_Earth_Tone_Data_Table

Una tabla de datos simple y receptiva con un estilo de diseño esqueuomórfico y una combinación de colores en tonos tierra, adecuada para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.

Abrir

Tabla de datos Modo oscuro

Componente de tabla de datos responsivo con modo oscuro

Abrir

Componente de tablas de datos

Un componente de tabla de datos responsivo para sitios de documentación/wiki, con soporte de modo oscuro, combinación de colores de tono tierra y HTML semántico. Diseñado para interfaces complejas con varias columnas, acciones y paginación.

Abrir