Tableaux avec Tailwind CSS

Tailwind CSS fournit un ensemble de classes utilitaires pratiques pour créer et personnaliser des tableaux.

Avec ces classes utilitaires, vous pouvez facilement contrôler le style des tableaux, y compris les bordures, l'espacement, l'alignement, les styles de police, etc.

Ensuite, nous allons présenter en détail comment utiliser Tailwind CSS pour créer et personnaliser des tableaux.

Styles de tableau de base

Tailwind CSS fournit quelques classes de base pour contrôler l'apparence et la disposition des tableaux. Les classes utilitaires couramment utilisées comprennent table-auto et table-fixed, qui servent à définir la disposition du tableau.

  • table-auto: Disposition par défaut, les largeurs de colonne du tableau sont automatiquement déterminées par le contenu.
  • table-fixed: Les largeurs de colonne du tableau sont fixes. La largeur de toutes les colonnes est répartie uniformément en fonction de la largeur totale du tableau, ce qui convient aux tableaux dont les colonnes ont une largeur uniforme.

L'utilisation de table-auto permet au tableau d'ajuster automatiquement la largeur des colonnes pour s'adapter au contenu des cellules.

Exemple

<table class="table-auto">
  <thead>
    <tr>
      <th>Chanson</th>
      <th>Artiste</th>
      <th>Année</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »

L'utilisation de table-fixed permet au tableau d'ignorer le contenu et d'utiliser des largeurs fixes pour les colonnes. La largeur de la première ligne définira les largeurs des colonnes pour tout le tableau.

Exemple

<table class="table-fixed">
  <thead>
    <tr>
      <th>Chanson</th>
      <th>Artiste</th>
      <th>Année</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »

Bordures et espacement

Tailwind fournit de nombreuses classes utilitaires pour contrôler les bordures, le padding et les marges des tableaux, ainsi que d'autres détails de mise en page.

Vous pouvez utiliser des classes telles que border, border-collapse, border-spacing pour contrôler le style de bordure du tableau.

  • border: Ajoute des bordures au tableau.
  • border-collapse: Contrôle si les bordures des cellules du tableau sont fusionnées.
  • border-spacing: Définit l'espacement entre les cellules.

Exemple

<table class="table-auto border-collapse w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2">En-tête 1</th>
      <th class="border px-4 py-2">En-tête 2</th>
      <th class="border px-4 py-2">En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Ligne 1, Colonne 1</td>
      <td class="border px-4 py-2">Ligne 1, Colonne 2</td>
      <td class="border px-4 py-2">Ligne 1, Colonne 3</td>
    </tr>
    <tr>
      <td class="border px-4 py-2">Ligne 2, Colonne 1</td>
      <td class="border px-4 py-2">Ligne 2, Colonne 2</td>
      <td class="border px-4 py-2">Ligne 2, Colonne 3</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »

Padding et Margin

Vous pouvez utiliser les classes px-* et py-* pour définir le padding des cellules du tableau, et les classes m-* et p-* pour définir la marge du tableau.

Exemple

<!-- Définir le padding des cellules du tableau -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-6 py-4">En-tête 1</th>
      <th class="border px-6 py-4">En-tête 2</th>
      <th class="border px-6 py-4">En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-6 py-4">Ligne 1, Colonne 1</td>
      <td class="border px-6 py-4">Ligne 1, Colonne 2</td>
      <td class="border px-6 py-4">Ligne 1, Colonne 3</td>
    </tr>
  </tbody>
</table>

<!-- Définir la marge du tableau -->
<table class="table-auto w-full border-collapse mt-8">
  <thead>
    <tr>
      <th class="border px-4 py-2">En-tête 1</th>
      <th class="border px-4 py-2">En-tête 2</th>
      <th class="border px-4 py-2">En-tête 3</th>
    </tr>
  </thead>
</table>

Essayez-le vous-même »

Alignement et styles de texte

Tailwind fournit des classes pour contrôler l'alignement et le style de police du contenu des cellules de tableau, telles que :

  • text-left, text-center, text-right: Contrôle l'alignement du texte.
  • font-semibold, font-bold: Contrôle la graisse de police.
  • uppercase, lowercase, capitalize: Contrôle la casse du texte.

Exemple

<!-- Définir l'alignement centré du texte -->
<table class="table-auto border-collapse w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2 text-center font-bold">En-tête 1</th>
      <th class="border px-4 py-2 text-center font-bold">En-tête 2</th>
      <th class="border px-4 py-2 text-center font-bold">En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2 text-center">Ligne 1, Colonne 1</td>
      <td class="border px-4 py-2 text-center">Ligne 1, Colonne 2</td>
      <td class="border px-4 py-2 text-center">Ligne 1, Colonne 3</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »

Fusion de cellules

Tailwind CSS prend en charge la définition de cellules fusionnées via des attributs HTML, tels quecolspanetrowspan。

Exemple

<!-- Fusionner les colonnes -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-4 py-2" colspan="2">En-tête 1 & 2</th>
     <th class="border px-4 py-2">En-tête 3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td class="border px-4 py-2" colspan="2">Ligne 1, Col 1 & 2</td>
     <td class="border px-4 py-2">Ligne 1, Col 3</td>
   </tr>
 </tbody>
</table>

Essayez-le vous-même »

Tableaux responsives

Vous pouvez également utiliser les classes de design responsive de Tailwind CSS pour contrôler la mise en page du tableau selon différentes tailles d'écran.

Par exemple, utilisez les préfixes sm:, md:, lg: pour définir le comportement d'affichage sur différents écrans.

Exemple

<!-- Masquer les colonnes sur les petits écrans -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-4 py-2">En-tête 1</th>
      <th class="border px-4 py-2 hidden md:table-cell">En-tête 2</th>
      <th class="border px-4 py-2">En-tête 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Ligne 1, Colonne 1</td>
      <td class="border px-4 py-2 hidden md:table-cell">Ligne 1, Col 2</td>
      <td class="border px-4 py-2">Ligne 1, Colonne 3</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »

Légende du tableau

Utilisezcaption-topPositionnez l'élément caption en haut du tableau.

Exemple

<table>
  <caption class="caption-top">
    Tableau 3.1 : Catcheurs professionnels et leurs prises de finition.
  </caption>
  <thead>
    <tr>
      <th>Catcheur</th>
      <th>Prise(s) de finition</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »

Utilisezcaption-bottompour positionner l'élément de légende en bas du tableau.

Exemple

<table>
  <caption class="caption-bottom">
    Tableau 3.1 : Catcheurs professionnels et leurs prises de finition.
  </caption>
  <thead>
    <tr>
      <th>Catcheur</th>
      <th>Prise(s) de finition</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Essayez-le vous-même »
Autres extensions