Proiect comunitar Formați un tabel simplu de date

Timp inalt am tinut un alt proiect comunitar, nu crezi? De data aceasta, vreau să văd ce puteți face cu un tabel de date direct ... Trimiteți-vă exemplele CSS și valoroase vor fi publicate pe site săptămâna viitoare. Citiți mai departe pentru a afla mai multe!

Puteți folosi orice tehnică doriți, atâta timp cât se întâmplă prin magia CSS

Asta e ușor

Îți dau o simplă piesă de marcare (o masă) pe care ai libertatea de a-ți schimba stilul în orice fel te rog. Iată marcajul (descărcați-l înfășurat ca fișier html dacă doriți):

 
 
 
 
Nume
 
Vârstă
 
Greutate (kg)
 
Profesie
 
 
 
 
 
Carolina Biggleswade
 
23
 
65
 
Jocheu
 
 
 
Harry Sparrowhead
 
34
 
89
 
Antrenor
 
 
 
Marjorie Uși
 
32
 
76
 
Manager de șantier
 
 
 
Earnest Piggington-Smithe
 
18
 
98
 
Mire
 
 
 

Toată lumea asociază tabele cu acele site-uri teribile de vechi, dar ele servesc un scop cu adevărat util: prezentarea datelor tabulare. Ce credeți că ați putea face cu acest tabel, utilizând puterea CSS? Iată două cu adevărat de bază exemple, doar pentru a obține o idee despre ceea ce facem aici.

---

Orice merge

Nu puteți atinge codul HTML, fără excepție. Dar ar putea fi greu de făcut stilul acestui tabel prin CSS!

• Joacă cu culorile
• Modificați fonturile (utilizați @ font-face dacă doriți)
• Faceți-o receptivă
• Adăugați conținut dinamic cu elemente pseudo
• Concentrați-vă pe utilizarea
• Suflați-vă departe cu răsturnări și tranziții
• Chiar și utilizarea texturilor și a imaginilor, dacă doriți (asigurați-vă că ați zip toată lotul în sus atunci când îl trimiteți peste)

Singurul lucru pe care trebuie să-l țineți cont este faptul că pagina demo are deja stiluri de resetare cu normalize.css.

---

Inscrie-ma!

Acest lucru nu a putut fi mai simplu:

• Descărcați fișierele de bază
• Modificați stilul în orice fel doriți
• Includeți orice detalii personale și o descriere a ceea ce ați făcut
• Puneți fișierul (fișierele) în sus și trimiteți-le la mine!

Voi publica cele mai bune când am adunat câteva. Acest lucru poate fi în curs de desfășurare - nu există un termen limită.

Aștept cu nerăbdare să văd ceea ce cu toții veniți! Mult noroc!