Projet communautaire Créez un tableau de données simple

Il est grand temps que nous organisions un autre projet communautaire, vous ne pensez pas? Cette fois, je veux voir ce que vous pouvez faire avec un tableau de données simple… Envoyez votre CSS et vos dignes exemples seront publiés sur le site la semaine prochaine. Continuez de lire pour en savoir davantage!

Vous pouvez utiliser toutes les techniques que vous voulez, pourvu qu'elles se produisent grâce à la magie de CSS

C'est facile

Je vais vous donner un simple morceau de balisage (une table) que vous êtes libre de styler à votre guise. Voici le balisage (téléchargez-le sous forme de fichier html si vous le souhaitez):

 
 
 
 
prénom
 
Âge
 
poids (kg)
 
Profession
 
 
 
 
 
Carolina Biggleswade
 
23
 
65
 
Jockey
 
 
 
Harry Sparrowhead
 
34
 
89
 
Entraîneur
 
 
 
Marjorie Doors
 
32
 
76
 
Yard Manager
 
 
 
Earnest Piggington-Smithe
 
18
 
98
 
Jeune marié
 
 
 

Tout le monde associe les tableaux à ces sites Web terrifiants d’anciens, mais ils servent un objectif réellement utile: la présentation de données tabulaires. Que pensez-vous pouvoir faire avec cette table, en utilisant la puissance de CSS? Voici deux vraiment basique exemples, juste pour que vous ayez une idée de ce que nous faisons ici.

---

Tout va

Vous ne pouvez pas toucher le code HTML, sans exception. Mais il y a beaucoup de choses que vous pourriez faire pour styler ce tableau via CSS!

• Jouer avec les couleurs
• Modifiez les polices (utilisez @ font-face si vous le souhaitez)
• Le rendre sensible
• Ajouter du contenu dynamique avec des pseudo-éléments
• Focus sur la convivialité
• Soufflez-nous avec des roulements et des transitions
• Même utilisez des textures et des images si vous le souhaitez (assurez-vous simplement de compresser le tout lorsque vous l'envoyez)

La seule chose que vous devez garder à l'esprit est que la page de démonstration a déjà ses styles réinitialisés avec normalize.css.

---

Enregistre-moi!

Cela ne pourrait pas être plus simple:

• Télécharger les fichiers de base
• Modifiez le style comme vous le souhaitez
• Inclure toutes les données personnelles et une description de ce que vous avez fait
• Zip votre fichier (s) et les envoyer à moi!

Je publierai les meilleurs quand j'en aurai rassemblé quelques-uns. Cela peut être en cours aussi - il n'y a pas de délai.

J'ai hâte de voir ce que vous venez tous avec! Bonne chance!