Ajouter un tableau dans Webflow

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un tableau dans Webflow avec le format HTML/CSS de Gemeos : responsive mobile, hover, première colonne mise en valeur.

Pourquoi cette méthode

Webflow propose un élément Table natif depuis 2024, mais uniquement sur les pages statiques dans le Designer. Pour les Rich Text et les collections CMS, la seule façon d'intégrer un tableau est d'utiliser un embed HTML avec du CSS personnalisé. Le format Gemeos que vous trouverez ici est celui utilisé dans tous les articles de l'Académie : scroll horizontal sur mobile, en-têtes en violet clair, première colonne mise en gras, hover sur les lignes.

Exemple :

1. Ajoutez le CSS dans votre projet

Deux options : soit dans Project Settings > Custom Code > Head pour l'appliquer à tout le site, soit dans un embed <style> sur la page concernée uniquement.

/* Wrapper scroll horizontal */
.blog-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 1.5rem;
}
/* Tableau principal */
.blog-table {
  position: relative;
  left: -0.5rem;
  width: calc(100% + 1rem);
  table-layout: fixed;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  background: transparent;
}
/* En-têtes */
.blog-table thead th {
  background: rgba(209, 207, 249, 0.72);
  padding: 18px 20px;
  font-weight: 600;
  text-align: left;
  color: #111;
  border: none;
  border-radius: 10px;
  white-space: normal;
}
/* Cellules body */
.blog-table tbody td {
  padding: 20px;
  background: #fffefa;
  border: none;
  border-radius: 10px;
  white-space: normal;
  text-align: left;
  vertical-align: top;
}
/* Première colonne */
.blog-table tbody td:first-child {
  background: rgba(232, 231, 255, 0.48);
  font-weight: 700;
}
/* Hover */
.blog-table tbody tr:hover td { background: #f0efff; }
.blog-table tbody tr:hover td:first-child { background: rgba(209, 207, 249, 0.6); }
/* Mobile */
@media (max-width: 640px) {
  .blog-table { table-layout: auto; min-width: 0; border-spacing: 0; }
  .blog-table thead { display: none; }
  .blog-table tbody tr {
    display: block; margin-bottom: 12px;
    border-radius: 12px; overflow: hidden; background: transparent;
  }
  .blog-table tbody td {
    display: grid; grid-template-columns: 40% 1fr;
    align-items: start; gap: 12px;
    padding: 14px 16px; border-radius: 0;
    border-bottom: 1px solid rgba(209, 207, 249, 0.4);
    background: #fffefa; font-size: 15px;
  }
  .blog-table tbody td:first-child {
    background: rgba(232, 231, 255, 0.72);
    font-weight: 700; border-radius: 12px 12px 0 0;
  }
  .blog-table tbody tr td:last-child {
    border-bottom: none; border-radius: 0 0 12px 12px;
  }
  .blog-table tbody td::before {
    content: attr(data-label);
    font-weight: 600; color: #111;
  }
  .blog-table tbody td:first-child::before { display: none; }
}

2. Collez le HTML dans un Embed Webflow

Dans le Designer ou dans votre Rich Text, ajoutez un élément Embed. Collez la structure HTML suivante et adaptez les en-têtes, les lignes et le nombre de colonnes à votre besoin. Le data-label sur chaque td (hors première colonne) sert uniquement pour le rendu mobile.

<div class="blog-table-wrapper">
  <table class="blog-table">
    <thead>
      <tr>
        <th>Critère</th>
        <th>Option A</th>
        <th>Option B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Performance</td>
        <td data-label="Option A">Rapide</td>
        <td data-label="Option B">Très rapide</td>
      </tr>
      <tr>
        <td>Prix</td>
        <td data-label="Option A">Gratuit</td>
        <td data-label="Option B">29€/mois</td>
      </tr>
    </tbody>
  </div>
  </table>

‍

3. Personnalisez votre tableau

Quelques ajustements courants :

• Nombre de colonnes : ajoutez ou supprimez des <th> dans le thead et des <td> dans chaque tr du tbody.
• Couleur des en-têtes : modifiez rgba(209, 207, 249, 0.72) dans le CSS.
• Largeur des colonnes : ajoutez style="width: 30%" sur les <th> pour contrôler les proportions.
• Alignement : ajoutez style="text-align: center" sur les cellules numériques.

4. Utilisation dans le CMS

Pour intégrer un tableau dans un article de blog ou une page CMS, utilisez l'élément Embed dans votre Rich Text Webflow. Collez le HTML complet (wrapper + table + CSS si non global). Le tableau s'affiche directement dans l'article, entièrement responsive.

Conclusion

Ce format est le standard Gemeos pour tous les tableaux comparatifs, cheat sheets et récapitulatifs. Il est utilisé dans tous les tutoriels de l'Académie. Cas d'usage :

• Tableaux comparatifs d'outils ou de solutions
• Cheat sheets de propriétés CSS ou d'attributs
• Récapitulatifs de tarifs ou de fonctionnalités