FR | EN
Installer
Documentation

Documentation - Table.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Tableaux

Les tableaux permettent d'organiser et d'afficher des données structurées de manière claire et lisible. Marssel propose deux approches pour créer des tableaux responsives : une version basée sur le système de grille (col-row) qui se transforme en cartes sur mobile, et une version tableau classique avec défilement horizontal. Les deux approches garantissent une excellente lisibilité sur tous les appareils.

Tableau basique

Aperçu
Nom Email Rôle
Jean Dupont jean@exemple.com Admin
Marie Curie marie@exemple.com Éditeur 
<table class="w-[100%] border-collapse-[collapse]">
    <thead>
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Nom</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Email</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Rôle</th>
        </tr>
    </thead>
    <tbody>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Jean Dupont</td>
            <td class="p-[12px]">jean@exemple.com</td>
            <td class="p-[12px]">Admin</td>
        </tr>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Marie Curie</td>
            <td class="p-[12px]">marie@exemple.com</td>
            <td class="p-[12px]">Éditeur</td>
        </tr>
    </tbody>
</table>

Tableau avec style alterné (striped)

Aperçu
Produit Prix Stock
Ordinateur portable 899€ 24
Souris sans fil 29€ 156
Clavier mécanique 89€ 42 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Produit</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Prix</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]">
            <td class="p-[12px]">Ordinateur portable</td>
            <td class="p-[12px]">899€</td>
            <td class="p-[12px]">24</td>
        </tr>
        <tr class="bg-[fff]">
            <td class="p-[12px]">Souris sans fil</td>
            <td class="p-[12px]">29€</td>
            <td class="p-[12px]">156</td>
        </tr>
        <tr class="bg-[f9f9f9]">
            <td class="p-[12px]">Clavier mécanique</td>
            <td class="p-[12px]">89€</td>
            <td class="p-[12px]">42</td>
        </tr>
    </tbody>
</table>

Tableau avec hover

Aperçu
Nom Poste Département
Marie Dupont Développeuse Technologie
Pierre Martin Designer Création
Lucie Bernard Manager Marketing 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Nom</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Poste</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Département</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Marie Dupont</td>
            <td class="p-[12px]">Développeuse</td>
            <td class="p-[12px]">Technologie</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Pierre Martin</td>
            <td class="p-[12px]">Designer</td>
            <td class="p-[12px]">Création</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Lucie Bernard</td>
            <td class="p-[12px]">Manager</td>
            <td class="p-[12px]">Marketing</td>
        </tr>
    </tbody>
</table>

Tableau avec badges de statut

Aperçu
Nom Email Statut Date
Jean Dupont jean@exemple.com Actif 2024-03-15
Marie Curie marie@exemple.com En attente 2024-03-14
Paul Martin paul@exemple.com Inactif 2024-03-13 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Nom</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Email</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Statut</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
            <td class="p-[12px]">Jean Dupont</td>
            <td class="p-[12px]">jean@exemple.com</td>
            <td class="p-[12px]">
                <span class="c-[28a745] bg-[e6f4ea] px-[8px] py-[4px] rounded-[12px] font-size-[14px]">Actif</span>
            </td>
            <td class="p-[12px]">2024-03-15</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
            <td class="p-[12px]">Marie Curie</td>
            <td class="p-[12px]">marie@exemple.com</td>
            <td class="p-[12px]">
                <span class="c-[ffc107] bg-[fff8e6] px-[8px] py-[4px] rounded-[12px] font-size-[14px]">En attente</span>
            </td>
            <td class="p-[12px]">2024-03-14</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
            <td class="p-[12px]">Paul Martin</td>
            <td class="p-[12px]">paul@exemple.com</td>
            <td class="p-[12px]">
                <span class="c-[dc3545] bg-[fce8e8] px-[8px] py-[4px] rounded-[12px] font-size-[14px]">Inactif</span>
            </td>
            <td class="p-[12px]">2024-03-13</td>
        </tr>
    </tbody>
</table>

Tableau responsive avec scroll horizontal

Aperçu
Nom Poste Département Statut Date
Marie Dupont Développeuse Front-end Technologie Actif 2024-03-15
Pierre Martin Designer UI/UX Création En attente 2024-03-14 
<div class="overflow-x-[auto] shadow-[0_2px_8px_rgba(0,0,0,0.1)] rounded-[8px]">
    <table class="w-[100%] min-w-[600px] border-collapse-[collapse]">
        <thead class="bg-[f8f8f8]">
            <tr>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Nom</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Poste</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Département</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Statut</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e2e2e2]">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
                <td class="p-[12px]">Marie Dupont</td>
                <td class="p-[12px]">Développeuse Front-end</td>
                <td class="p-[12px]">Technologie</td>
                <td class="p-[12px]">
                    <span class="c-[28a745] bg-[e6f4ea] px-[8px] py-[2px] rounded-[12px]">Actif</span>
                </td>
                <td class="p-[12px]">2024-03-15</td>
            </tr>
            <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e2e2e2]">
                <td class="p-[12px]">Pierre Martin</td>
                <td class="p-[12px]">Designer UI/UX</td>
                <td class="p-[12px]">Création</td>
                <td class="p-[12px]">
                    <span class="c-[ffc107] bg-[fff8e6] px-[8px] py-[2px] rounded-[12px]">En attente</span>
                </td>
                <td class="p-[12px]">2024-03-14</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau responsive avec grille (col-row)

Aperçu
Nom
Email
Rôle
Statut
Nom: Jean Dupont
Email: jean@exemple.com
Rôle: Administrateur
Statut: Actif
Nom: Marie Curie
Email: marie@exemple.com
Rôle: Éditeur
Statut: En attente 
<!-- Se transforme en cartes sur mobile -->
<div class="shadow-[0_1px_3px_rgba(0,0,0,0.1)] rounded-[8px] overflow-[hidden]">
    <!-- En-tête (masqué sur mobile) -->
    <div class="col-[row] bg-[f8f8f8] p-[16px] border-b-[2px_solid_e2e2e2] d-[none] md--d-[flex]">
        <div class="col-[3] font-weight-[600] c-[333]">Nom</div>
        <div class="col-[3] font-weight-[600] c-[333]">Email</div>
        <div class="col-[3] font-weight-[600] c-[333]">Rôle</div>
        <div class="col-[3] font-weight-[600] c-[333]">Statut</div>
    </div>

    <!-- Ligne 1 -->
    <div class="col-[row] p-[16px] border-b-[1px_solid_e2e2e2] bg-[ffffff]:hover">
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Nom: </span>Jean Dupont
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Email: </span>jean@exemple.com
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Rôle: </span>Administrateur
        </div>
        <div class="col-[12] md--col-[3]">
            <span class="font-weight-[600] md--d-[none]">Statut: </span>
            <span class="c-[28a745]">Actif</span>
        </div>
    </div>

    <!-- Ligne 2 -->
    <div class="col-[row] p-[16px] border-b-[1px_solid_e2e2e2] bg-[ffffff]:hover">
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Nom: </span>Marie Curie
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Email: </span>marie@exemple.com
        </div>
        <div class="col-[12] md--col-[3] mb-[8px] md--mb-[0]">
            <span class="font-weight-[600] md--d-[none]">Rôle: </span>Éditeur
        </div>
        <div class="col-[12] md--col-[3]">
            <span class="font-weight-[600] md--d-[none]">Statut: </span>
            <span class="c-[ffc107]">En attente</span>
        </div>
    </div>
</div>

Tableau avec actions

Aperçu
Nom Email Rôle Actions
Jean Dupont jean@exemple.com Administrateur
Marie Curie marie@exemple.com Éditeur 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Nom</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Email</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Rôle</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Jean Dupont</td>
            <td class="p-[12px]">jean@exemple.com</td>
            <td class="p-[12px]">Administrateur</td>
            <td class="p-[12px] text-align-[right]">
                <button class="p-[6px_12px] bg-[0B63F3] c-[white] rounded-[4px] border-[none] cursor-[pointer] mr-[4px] bg-[2563eb]:hover">
                    Éditer
                </button>
                <button class="p-[6px_12px] bg-[D41212] c-[white] rounded-[4px] border-[none] cursor-[pointer] bg-[dc2626]:hover">
                    Supprimer
                </button>
            </td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Marie Curie</td>
            <td class="p-[12px]">marie@exemple.com</td>
            <td class="p-[12px]">Éditeur</td>
            <td class="p-[12px] text-align-[right]">
                <button class="p-[6px_12px] bg-[0B63F3] c-[white] rounded-[4px] border-[none] cursor-[pointer] mr-[4px] bg-[2563eb]:hover">
                    Éditer
                </button>
                <button class="p-[6px_12px] bg-[D41212] c-[white] rounded-[4px] border-[none] cursor-[pointer] bg-[dc2626]:hover">
                    Supprimer
                </button>
            </td>
        </tr>
    </tbody>
</table>

Tableau avec checkbox

Un simple bouton avec fond et texte

Aperçu
Produit Catégorie Prix
MacBook Pro Ordinateurs 2 499€
iPad Air Tablettes 699€ 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] w-[40px] border-b-[2px_solid_e0e0e0]">
                <input type="checkbox" class="cursor-[pointer]">
            </th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Produit</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Catégorie</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Prix</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">
                <input type="checkbox" class="cursor-[pointer]">
            </td>
            <td class="p-[12px]">MacBook Pro</td>
            <td class="p-[12px]">Ordinateurs</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">2 499€</td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">
                <input type="checkbox" class="cursor-[pointer]">
            </td>
            <td class="p-[12px]">iPad Air</td>
            <td class="p-[12px]">Tablettes</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">699€</td>
        </tr>
    </tbody>
</table>

Tableau avec scrollbar personnalisée

Aperçu
Produit Description Catégorie Stock Prix
Ordinateur portable Intel Core i7, 16GB RAM, 512GB SSD Informatique 24 1 299€ 
<style>
    .custom-scrollbar::-webkit-scrollbar {
        height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #c0c0c0;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }
</style>
<div class="overflow-x-[auto] custom-scrollbar rounded-[8px] shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
    <table class="w-[100%] min-w-[800px] border-collapse-[collapse]">
        <thead class="bg-[f8f8f8]">
            <tr>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Produit</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Description</th>
                <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Catégorie</th>
                <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Stock</th>
                <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Prix</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
                <td class="p-[12px]">Ordinateur portable</td>
                <td class="p-[12px]">Intel Core i7, 16GB RAM, 512GB SSD</td>
                <td class="p-[12px]">Informatique</td>
                <td class="p-[12px] text-align-[right]">24</td>
                <td class="p-[12px] text-align-[right] font-weight-[600]">1 299€</td>
            </tr>
        </tbody>
    </table>
</div>

Tableau avec footer

Aperçu
Produit Quantité Prix unitaire Total
MacBook Pro 2 2 499€ 4 998€
Magic Mouse 3 89€ 267€
Total général: 5 265€ 
<table class="w-[100%] border-collapse-[collapse] shadow-[0_2px_8px_rgba(0,0,0,0.1)] rounded-[8px] overflow-[hidden]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Produit</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Quantité</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Prix unitaire</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">MacBook Pro</td>
            <td class="p-[12px] text-align-[right]">2</td>
            <td class="p-[12px] text-align-[right]">2 499€</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">4 998€</td>
        </tr>
        <tr class="border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">Magic Mouse</td>
            <td class="p-[12px] text-align-[right]">3</td>
            <td class="p-[12px] text-align-[right]">89€</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">267€</td>
        </tr>
    </tbody>
    <tfoot class="bg-[f8f8f8]">
        <tr>
            <td colspan="3" class="p-[12px] text-align-[right] font-weight-[700] border-t-[2px_solid_e0e0e0]">
                Total général:
            </td>
            <td class="p-[12px] text-align-[right] font-weight-[700] font-size-[18px] c-[0B63F3] border-t-[2px_solid_e0e0e0]">
                5 265€
            </td>
        </tr>
    </tfoot>
</table>

Tableau compact

Aperçu
ID Nom Statut
#001 Jean Dupont ✓
#002 Marie Curie ✗ 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[8px] text-align-[left] font-weight-[600] font-size-[14px] border-b-[2px_solid_e0e0e0]">ID</th>
            <th class="p-[8px] text-align-[left] font-weight-[600] font-size-[14px] border-b-[2px_solid_e0e0e0]">Nom</th>
            <th class="p-[8px] text-align-[left] font-weight-[600] font-size-[14px] border-b-[2px_solid_e0e0e0]">Statut</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[8px] font-size-[14px]">#001</td>
            <td class="p-[8px] font-size-[14px]">Jean Dupont</td>
            <td class="p-[8px] font-size-[14px]">
                <span class="c-[28a745]">✓</span>
            </td>
        </tr>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[8px] font-size-[14px]">#002</td>
            <td class="p-[8px] font-size-[14px]">Marie Curie</td>
            <td class="p-[8px] font-size-[14px]">
                <span class="c-[D41212]">✗</span>
            </td>
        </tr>
    </tbody>
</table>

Tableau avec images

Aperçu
Produit Description Prix
Produit MacBook Pro
Ordinateur portable haute performance 2 499€ 
<table class="w-[100%] border-collapse-[collapse]">
    <thead class="bg-[f8f8f8]">
        <tr>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Produit</th>
            <th class="p-[12px] text-align-[left] font-weight-[600] border-b-[2px_solid_e0e0e0]">Description</th>
            <th class="p-[12px] text-align-[right] font-weight-[600] border-b-[2px_solid_e0e0e0]">Prix</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-[f9f9f9]:hover border-b-[1px_solid_e0e0e0]">
            <td class="p-[12px]">
                <div class="d-[flex] items-[center] gap-[12px]">
                    <img src="https://placehold.co/60x60"
                    class="w-[60px] h-[60px] rounded-[8px] object-[cover]"
                    alt="Produit">
                    <span class="font-weight-[500]">MacBook Pro</span>
                </div>
            </td>
            <td class="p-[12px] c-[666]">Ordinateur portable haute performance</td>
            <td class="p-[12px] text-align-[right] font-weight-[600]">2 499€</td>
        </tr>
    </tbody>
</table>
← Précédent Cards
Suivant → Header

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).