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.

f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08

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.

   f5d188ed2c074f8b944552db028f98a1  
     ae20bdd317918ca68efdc799512a9b39  
       a34de1251f0d9fe1e645927f19a896e8  
         b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
         b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
         b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
       fd273fcf5bcad3dfdad3c41bd81ad3e5  
     7943277d65306330563feb42dc8c705a  
     92cee25da80fac49f6fb6eec5fd2c22a  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5    
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     ca745a59da05f784b8811374296574e1  
   f16b1740fad44fb09bfe928bcc527e08
   

   Ç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!