Script

Webflow

Injecter un tableau comparatif dans un rich text

Javascript

HTML

CSS

Auteur

Aurélien Gallier

Démo lecture seule

Voir

Remix Link

Voir

Démo live

Voir

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.


<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>

Tuto vidéo

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.


<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>

Tuto vidéo

‍

Modifie les contenus !

Plus de scripts ?

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Slider avant/après

Ajoute un slider interactif sur ton site Webflow avec un effet Avant/Après

Voir

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Transition de page - Slide up

Crées une animation stylée pour tes transitions de page pour une navigation plus fluide !

Voir

Réservé aux étudiants CORIACE

Javascript

CSS

HTML

Player video Youtube optimisé

Marre de voir tes performances Page Speed Insight réduites à néant à cause d'une seule vidéo dans ta page ? Voici un script pour te permettre d'ajouter une vidéo sans impacter les performances !

Voir

Voir tous les scripts

Injecter un tableau comparatif dans un rich text

Copie-colle ce code HTML dans ton rich text

Tuto vidéo

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

Tuto vidéo

Modifie les contenus !

Plus de scripts ?

+1 100 no-codeurs

Tu veux qu’on crée le site de ton entreprise ?