Transformez un tableau HTML en vue carte en utilisant uniquement du CSS

J'aimerais partager une expérience récente qui explore comment transformer un simple tableau HTML à l'ancienne en une vue de carte dynamique, allant au-delà des lignes et colonnes traditionnelles.

Commencez avec un simple tableau HTML

Commençons par un simple tableau HTML tel que le suivant.

<table>  
  <thead>  
    <tr>  
      <th>Company</th>  
      <th>Contact</th>  
      <th>Country</th>  
    </tr>  
  </thead>  
  <tbody>  
  <tr>  
    <td>Alfreds Futterkiste</td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro Moctezuma</td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>    
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro  </td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  </tbody>  
</table>

Cela ressemble à ceci une fois rendu dans le navigateur.

Juste un autre tableau HTML

Rien d'extraordinaire.

Par définition, les tableaux sont constitués de lignes et de colonnes. Comment pouvons-nous transformer la disposition traditionnelle des lignes et des colonnes en quelque chose de plus dynamique ?

Découvrez la puissance de CSS Grid

Les tables ne doivent pas nécessairement être ennuyeuses. Avec quelques astuces CSS simples, vous pouvez facilement transformer un tableau HTML traditionnel en une liste élégante ou une vue de carte.

La meilleure partie ? Pas de JavaScript, juste du CSS pur !

La grille CSS est une ébauche de recommandation des candidats du W3C depuis 2007, cependant, elle a été adoptée par les versions récentes de tous les principaux navigateurs actuels.

La grille CSS est conçue à la fois pour les lignes et les colonnes, ce qui la rend idéale pour les mises en page complexes telles que les tableaux. Il vous permet de gérer simultanément les alignements horizontaux et verticaux, ce qui vous donne beaucoup plus de contrôle que Flexbox, qui est principalement unidimensionnel (ligne ou colonne).

Propriétés de la grille CSS à utiliser

1. Utilisez la disposition de grille CSS*t* pour et .
2. Utilisez la propriété d'affichage CSS et définissez tous les comme éléments de bloc

   Grâce aux propriétés de grille CSS, notre simple tableau HTML se transforme déjà comme par magie en une vue de liste réactive, affichant chaque enregistrement proprement dans une seule colonne.

   table tbody, table thead {  
     display: grid;  
   }  
   table td {  
     display: block;  
   }
   

   

   Ça a l’air chic mais un peu chaotique ! Saupoudrons quelques bordures CSS pour donner à chaque ligne de notre liste un peu de répit.

   table, th, tr {  
     border: 1px solid black;  
   }
   

   Et voilà. Découvrez le nouveau look ! Pas trop mal pour une vue de liste créée sans une seule ligne de magie JavaScript !

   

   Maintenant, nous avons une belle liste créée à partir d'un tableau HTML à l'ancienne, comment pouvons-nous transformer cette belle liste en une vue de carte élégante ?

   Alerte spoil : il suffit de saupoudrer quelques lignes CSS supplémentaires !

   Transformer la liste en vue carte

   Notre dernière astuce pour transformer un tableau en cartes consiste à utiliser la propriété de grille CSS grid-template-columns :

   table tbody {  
     display: grid;  
     grid-template-columns: repeat(4, 1fr);  
   }
   

   grid-template-columns est une propriété CSS utilisée dans la mise en page CSS Grid pour définir la structure des colonnes de la grille. Il précise le nombre de colonnes, leurs largeurs et la façon dont l'espace à l'intérieur de la grille est divisé.

   Avec la fonction repeat(), le premier paramètre nous permet de décider du nombre de colonnes que nous voulons, disons 4, car qui n'aime pas un joli nombre rond ? Le deuxième paramètre indique la taille de ces colonnes : 1fr, ou une fraction de l'espace disponible. C'est comme lancer un petit discours d'encouragement à vos colonnes : « Vous obtenez tous une part égale du gâteau spatial ! »

   Notre vue finale de la carte

   

   Prenez un moment pour explorer le code et constater par vous-même les résultats sur CodePen. C’est l’endroit idéal pour expérimenter et jouer avec les transformations de grille CSS. Vous découvrirez peut-être même des surprises amusantes en cours de route.

   Gardez à l'esprit que CSS Grid est également réactif, offrant aux développeurs un contrôle amélioré sur la façon dont les mises en page s'ajustent et se redistribuent sur différentes tailles d'écran et appareils.

   Facultatif : ajout d'une étiquette de données à la vue de la carte

   Bien que la vue de la carte soit visuellement attrayante, elle manque de clarté dans les informations des colonnes, laissant les utilisateurs deviner les données représentées dans chaque carte.

   En incorporant une touche de JavaScript, nous pouvons ajouter de manière transparente des étiquettes de données pour chaque colonne, améliorant ainsi l'association entre les étiquettes et leurs cellules correspondantes.

   <table>  
     <thead>  
       <tr>  
         <th>Company</th>  
         <th>Contact</th>  
         <th>Country</th>  
       </tr>  
     </thead>  
     <tbody>  
     <tr>  
       <td>Alfreds Futterkiste</td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro Moctezuma</td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>    
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro  </td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     </tbody>  
   </table>
   

   Ça ressemble maintenant à ça

   

   Démo

   Cela n'a rien à voir avec le tableau HTML avec lequel nous avons commencé. Avec CSS Grid, les options de mise en page sont infinies car elles permettent un contrôle total sur les lignes et les colonnes dans un espace bidimensionnel.

   Conclusion

   Ce tutoriel ne fait qu'effleurer la surface de l'iceberg. Vous pouvez facilement créer des mises en page plus réactives, superposer des éléments, répartir les éléments sur plusieurs lignes ou colonnes et ajuster les zones de grille de manière dynamique, ce qui le rend très polyvalent pour divers besoins de mise en page.

   Bon quadrillage !

   À propos de l'auteur

   L'auteur est un développeur Web chevronné qui a créé le populaire outil de grille de données PHP (phpgrid.com), exploitant la puissance de CRUD pour rendre le monde meilleur — du moins pour les développeurs qui cherchent à se simplifier la vie !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!