Créer un tableau dans 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>