Créer un tableau dans Webflow

Ajouter un tableau en CSS directement sur votre projet Webflow

Language: HTML

Catégorie : Utilities

Favicon de Justa
<style>

/* Variables  */
: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;
}


/* Class */
.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>
<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>
Sommaire
1
Le script

Utiliser un LLM pour résumer ou expliquer ce script

1

Le script

Ajouter le script sur la page ou le projet Webflow

<style>

/* Variables  */
: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;
}


/* Class */
.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>
<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>
2

Les attributes

3

Tuto

4

Template

5

Code source du script

<style>

/* Variables  */
: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;
}


/* Class */
.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>
<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>

Voir d'autres scripts de la même catégorie

Je veux lancer mon projet avec Justa

Nous contacter