Tableau
Créer un tableau dans Webflow
Ajouter un tableau en CSS directement sur votre projet Webflow
Etape 1
Copier le script et le coller sur votre page ou projet Webflow
<style>
/* ----------------------------- DESIGN DU TABLEAU ----------------------------- */
:root {
/* COULEURS DU TABLEAU */
--table-header-font-color: #ffffff; /* couleurs des en-têtes */
--table-header-bg-color: #2260c9; /* couleurs du backgound des en-têtes */
--table-header-border-color: #ffffff; /* couleurs des en-têtes */
--table-cell-font-color: #777777;
--table-cell-border-color: #d2d2d2;
--table-bg-color: #ffffff;
--table-border-color: #ffffff; /* couleurs des borders */
/* DIMENSIONS DU TABLEAU */
--table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
--table-header-padding-left-right: 10px; /* headers left & right padding */
--table-heading-font-size: 18px;
--table-cell-padding-top-bottom: 10px; /* Top & bottom des cellules */
--table-cell-padding-left-right: 10px; /* Left & Right des cellules */
--table-cell-font-size: 14px;
--table-cell-min-width: 200px;
--table-margin-bottom: 48px;
}
/* ----------------------------- FIN DU DESIGN DU TABLEAU ----------------------------- */
/* Paramétrage ci-dessous, pas besoin de changer des éléments */
.table-wrap {
overflow-x: scroll;
width: 100%;
margin-bottom: var(--table-margin-bottom);
}
table, th, td {
border-collapse: collapse;
}
table {
width: 100%;
border: 1px solid var(--table-border-color);
background-color: var(--table-bg-color);
}
th:last-child {
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-bg-color);
border-bottom: 1px solid var(--table-header-bg-color);
}
th {
text-align: left;
color: var(--table-header-font-color);
background-color: var(--table-header-bg-color);
padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
font-size: 16px;
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-border-color);
border-bottom: 1px solid var(--table-header-bg-color);
font-size: var(--table-heading-font-size);
}
td {
color: var(--table-cell-font-color);
border: 1px solid var(--table-cell-border-color);
padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
font-size: var(--table-cell-font-size);
}
th, td {
min-width: var(--table-cell-min-width);
}
</style>
<!-- ****Contenu à modifier **** -->
<div class="table-wrap">
<table>
<!-- En tête des colonnes -->
<tr>
<th>Pays</th>
<th>Capitale</th>
<th>Nombre d'habitants</th>
</tr>
<!-- Ligne 1 -->
<tr>
<td>France</td>
<td>Paris</td>
<td>67 millions</td>
</tr>
<!-- Ligne 2 -->
<tr>
<td>Espagne</td>
<td>Madrid</td>
<td>48 millions</td>
</tr>
<!-- Ligne 3 -->
<tr>
<td>Allemagne</td>
<td>Berlin</td>
<td>75 millions</td>
</tr>
</table>
</div>
Copier
Etape 2
Intégrer sur Webflow en adaptant à votre projet et votre configuration
- Changer les couleurs et autres éléments design dans la première partie du code
- Remplacer les valeurs dans les différentes lignes et colonnes (2ème partie du code)
Vous pouvez aussi utiliser l'outil HTMLTables qui est plus visuel et facile d'utilisation
Progressez sur Webflow
Recevez nos articles & guides. 1 fois par mois seulement.
Nous sommes un collectif de développeurs Webflow. Nous intégrons vos maquettes ou transférons vos sites depuis un autre CMS
Copyright © 2022 Justa
Sneakerland.co