SCRIPTWEBFLOWHTMLCSS

Tableau comparatif dans un rich text

Un comparatif propre au milieu d'un article, sans quitter le rich text de Webflow : le HTML dans un embed, le CSS dans le head.

Voir la démo en directOuvrir l'aperçu Webflow

/ ÉTAPE 01

Copie-colle ce code HTML dans ton rich text

Ajoute un élément embed dans ton rich text et colle ce code HTML pour structurer ta table comparative.

tableau-comparatif.html
<div class="wrapper">
  <div class="comparison">

    <!-- Points positifs -->
    <div class="card positive">
      <h2>Points positifs</h2>
      <ul>
        <li>
          <!-- check SVG -->
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.485 1.929a1 1 0 0 1 1.414 1.414L6.414 11.828l-4.95-4.95a1 1 0 1 1 1.414-1.414l3.536 3.536 7.071-7.071z"/>
          </svg>
          L'univers est incroyable : si tu as déjà joué à Cyberpunk 2077…
        </li>
        <li>
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.485 1.929a1 1 0 0 1 1.414 1.414L6.414 11.828l-4.95-4.95a1 1 0 1 1 1.414-1.414l3.536 3.536 7.071-7.071z"/>
          </svg>
          Très facile de créer un scénario dans Cyberpunk RED…
        </li>
        <li>
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.485 1.929a1 1 0 0 1 1.414 1.414L6.414 11.828l-4.95-4.95a1 1 0 1 1 1.414-1.414l3.536 3.536 7.071-7.071z"/>
          </svg>
          Tu peux trouver beaucoup de vidéos YouTube et de guides…
        </li>
        <li>
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.485 1.929a1 1 0 0 1 1.414 1.414L6.414 11.828l-4.95-4.95a1 1 0 1 1 1.414-1.414l3.536 3.536 7.071-7.071z"/>
          </svg>
          Les personnages, les systèmes de classes et d'upgrades…
        </li>
      </ul>
    </div>

    <!-- Points négatifs -->
    <div class="card negative">
      <h2>Points négatifs</h2>
      <ul>
        <li>
          <!-- cross SVG -->
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
          </svg>
          Le livre est horrible à prendre en main…
        </li>
        <li>
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
          </svg>
          Apprendre les règles sur YouTube demande 4 h de vidéos…
        </li>
        <li>
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
          </svg>
          La fiche personnage est illisible tellement elle est compliquée…
        </li>
      </ul>
    </div>

  </div>
</div>

/ ÉTAPE 02

Copie-colle ce code CSS dans le <head> de ta page

Pour styliser ta table comparative, ajoute le CSS dans le bloc de code <head> de ta page.

tableau-comparatif.css
<style>
    /* wrapper général pour le padding horizontal */
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 0;
    }

    /* flex + gap pour espacer les colonnes */
    .comparison {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin: 30px 0;
    }

    .card {
      box-sizing: border-box;
      padding: 20px;
      border-radius: 8px;
      font-family: Arial, sans-serif;
      flex: 1 1 calc(50% - 10px); /* 2 colonnes sur desktop */
    }

    .card h2 {
      font-size: 1.2rem;
      margin-bottom: 0.75em;
    }

    .card ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    /* chaque item est un flex pour aligner l'icône + le texte */
    .card ul li {
      display: flex;
      align-items: center;
      margin-bottom: 0.75em;
    }
    .card ul li:last-child {
      margin-bottom: 0;
    }
    .card ul li svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }

    /* POSITIF */
    .card.positive {
      background-color: #e6f9e9;
      border: 1px solid #b2e8c5;
    }
    .card.positive h2 {
      color: #2d7f4f;
    }
    .card.positive ul li svg path {
      fill: #2d7f4f;
    }

    /* NEGATIF */
    .card.negative {
      background-color: #fde2e2;
      border: 1px solid #f5b5b5;
    }
    .card.negative h2 {
      color: #a82a2a;
    }
    .card.negative ul li svg path {
      fill: #a82a2a;
    }
    .card.negative ul li svg {
      width: 25px;    /* passe la croix à 25x25 au lieu de 16x16 */
      height: 25px;
    }

    /* responsive : passage en 1 colonne sous 600px */
    @media screen and (max-width: 600px) {
      .card {
        flex: 1 1 100%;
      }
    }
</style>

/ ÉTAPE 03

Modifie les contenus

Le tableau est en HTML pur : tu remplaces les lignes et les libellés directement dans l'embed.

/ OÙ LE COLLER

DansWebflow, Paramètres › Custom code

CUSTOM CODE

PARAMÈTRES DU PROJET

Head code

<style> … </style>

Footer code

<script> … </script>

Les codes personnalisés ne s'appliquent qu'après publication.

Le style en Head, le script en Footer

Le CSS doit être lu avant l'affichage, le JavaScript après le contenu de la page.

Une seule fois pour tout le site

Les deux se posent au niveau du projet, pas page par page. Les blocs les trouvent tout seuls.

Publier pour activer

Tant que le site n'est pas publié, le code personnalisé ne tourne pas, même en aperçu.

/ LES OPTIONS

Tout se pilote par classe et par attribut.

.wrapper

classe

Le conteneur général, il porte la largeur maximale et le padding.

.comparison

classe

La grille des deux colonnes du comparatif.

.card.positive

classe

La colonne des points positifs.

.card.negative

classe

La colonne des points négatifs.

/ DANS LA MÊME FAMILLE

Les autres blocs
de contenu.

JAVASCRIPTLimiter les items par breakpointAjuste le nombre d'items affichés dans une liste de collection, selon l'écran.JAVASCRIPTSlider avant / aprèsUn slider interactif avec effet avant / après, à poser sur n'importe quelle image.JAVASCRIPTTransition de page slide upUne animation de transition entre tes pages, pour une navigation plus fluide.

/ PLUS DE SCRIPTS

Continue à équiper
tes projets.

SCRIPTJAVASCRIPTLimiter les items par breakpointAjuste le nombre d'items affichés dans une liste de collection, selon l'écran.GRATUIT · 0,8 KO · 2 ÉTAPESSCRIPTJAVASCRIPTExit popupAffiche une popup au moment précis où le visiteur s'apprête à quitter la page.GRATUIT · 5,2 KO · 2 ÉTAPESSCRIPTJAVASCRIPTCompte à rebours personnaliséUn compte à rebours sur mesure pour afficher une date limite.GRATUIT · 1,0 KO · 2 ÉTAPES