Ajouter un tableau dans Webflow

outils :

Introduction

Ajouter un tableau dans Webflow n'est pas possible nativement, il faut passer par du code personnalisé ou des solutions tierces comme celle de Finsweet par exemple.

Le problème, la majorité des solutions ne permettent pas d'ajouter de tableau dans vos CMS.

C'est pourquoi l'agence Webflow Gemeos vous mettons à disposition un template HTML/CSS que vous pouvez adapter à vos besoin.

‍

Tutoriel

Ajoutez ce code CSS/HTM dans votre page

Le CSS

 <style>
/* Style général pour les tableaux, réglant la largeur, l'espacement, etc. */
table {
    width: 100%; /* Largeur du tableau, peut être ajustée en pourcentage ou en pixels */
    margin: 24px 0; /* Espace au-dessus et en dessous du tableau */
    border-collapse: separate; /* Garde les bordures des cellules séparées */
    border-spacing: 0; /* Aucun espace entre les bordures des cellules */
    position: relative; /* Nécessaire pour positionner les éléments pseudo avant et après */
}

/* Bordure externe du tableau, réglant la couleur, l'épaisseur et le style */
table::before {
    content: ""; /* Nécessaire pour créer un élément pseudo */
    position: absolute; /* Positionnement absolu par rapport au tableau */
    top: 0; /* Position en haut du tableau */
    left: 0; /* Position à gauche du tableau */
    right: 0; /* Position à droite du tableau */
    bottom: 0; /* Position en bas du tableau */
    border: 1px solid #EBEBEB; /* Épaisseur, style et couleur de la bordure extérieure */
    border-radius: 12px; /* Rayon de la bordure pour les coins arrondis */
    z-index: -1; /* Place l'élément derrière le contenu du tableau */
}

/* Style des cellules du tableau, réglant le padding, l'alignement du texte, etc. */
th, td {
    padding: 8px 12px; /* Espace à l'intérieur de chaque cellule */
    text-align: left; /* Alignement du texte dans les cellules */
    font-size: 14px; /* Taille de la police dans les cellules */
    min-width: 192px; /* Largeur minimale de chaque cellule */
}

/* Style spécifique pour les en-têtes du tableau */
th {
    font-weight: 600; /* Graisse de la police pour les en-têtes */
}

/* Style spécifique pour les cellules de données */
td {
    vertical-align: top; /* Alignement vertical du contenu dans les cellules */
}

/* Bordures entre les cellules, évite les bordures doublées */
th:not(:last-child), td:not(:last-child) {
    border-right: 1px solid #EBEBEB; /* Bordure à droite de chaque cellule sauf la dernière */
}

/* Bordure en bas de chaque cellule */
th, td {
    border-bottom: 1px solid #EBEBEB; /* Bordure en bas de chaque cellule */
}

/* Suppression de la bordure en bas pour la dernière ligne de cellules */
tr:last-child td {
    border-bottom: none; /* Pas de bordure en bas pour la dernière ligne */
}

/* Conteneur autour du tableau pour gérer le défilement sur les petits écrans */
.tableau-container {
    overflow-x: visible; /* Défilement horizontal si nécessaire */
    width: auto; /* Largeur automatique par défaut */
}

/* Style pour les petits écrans, comme les tablettes et mobiles */
@media (max-width: 768px) {
    .tableau-container {
        overflow-x: scroll; /* Active le défilement horizontal */
        width: 100%;  /* Largeur maximale sur petits écrans */
    }
}
</style>

‍

Le code HTML

<div class="tableau-container">  <table>  <tr> <th>Titre 1</th>  <th>Titre 2</th>  <th>Titre 3</th>  </tr>  <tr> <td>Vous fournir nos services ...</td>  <td>Exécution d'un contrat ...</td>  <td>Vos données sont conservées ...</td>  </tr>  <tr> <td>Exécuter votre commande ...</td>  <td>Exécution d'un contrat ...</td>  <td>Les données personnelles sont conservées ...</td>  </tr> </table> </div>

‍

Ajustez le code pour qu'il soit adapter à vos besoin

Pour adapter ce tableau en fonction des besoins spécifiques, vous pouvez ajuster les valeurs suivantes selon vos préférences :

width pour la largeur du tableau
margin pour l'espacement autour du tableau
border pour la couleur, l'épaisseur et le style des bordures
padding pour l'espace à l'intérieur des cellules
font-size pour la taille du texte dans les cellules
min-width pour la largeur minimale des cellules

Vous pouvez également ajouter ou supprimer des lignes et des colonnes directement dans le HTML. Pour les couleurs des bordures et d'autres styles visuels, il suffit de modifier les valeurs hexadécimales (comme #EBEBEB) dans le CSS.

‍

C'est tout ! Publiez et testez le résultat

‍

Sandro D.

Mis à jour le

6/7/2024

Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)