Luați în considerare modul în care puteți aranja frumos un tabel folosind CSS3. Datorita noilor selectorii o oportunitate de a crea un stil unic, fără a adăuga clase suplimentare de marcare.
Așa va arăta ca structura noastră de bază a tabelului:
Avem toate elementele care sunt necesare pentru tabel: antet. corp sau de subsol.
In acest tutorial, vom întocmi tabele comparative ale tarifelor de găzduire. Exemplul va fi de trei versiuni diferite de decor de masă. Aplicați unul sau un alt stil poate fi foarte simplu, trebuie doar să adăugați la clasa tabelul Table1. Tabelul 2 sau Tabelul 3.
Style 1 - .table1
Primul tabel va fi în nuanțe de verde, cu un gradient de celule descriptive elmenty „th“.
Să începem cu stilul general de tabel:
Ne dorim ca între celulele din tabel au existat unele spațiu, așa că aplică proprietății de frontieră-colaps: separat;
În elemente de „mii“ va capac un stil:
Pentru browserele Firefox si Webkit am folosit un gradient de trei culori. Cu border-radius zakrgulyaem stânga sus și marginea din dreapta sus al celulelor.
Acum, pentru partea de „mii“, care este gol:
Partea de jos a tabelului sau subsol va iimet stilul următor:
Trebuie doar să adăugați o umbră pentru a îmbunătăți textul.
Celulele de masă interne vor avea un fundal verde deschis și umbră albă textului:
De asemenea, adăugați o rază mică, și de frontieră, doar 2px la celule. Acest lucru va crea un efect mic stralucitoare. Am putea folosi caseta-umbra pentru a crea un efect similar.
Acum, vom adăuga o pictogramă toate celulele care au un SPAN cu clasa .Verificaþi. Acest lucru se realizează prin adăugarea acestui stil:
proprietate de conținut ne permite să adăugați conținut în interiorul elementului (în acest caz, imaginea). Am putea adăuga, de asemenea, un text aici. În acest caz, putem utiliza pseudo-clase sau după :: :: înainte. pentru a insera text înainte sau după conținut.
Stil 2 - .table2
Al doilea tabel este un pic de elegant. antet negru sau subsol. Acest tabel va fi spațiu gol între celule.
Partea de sus și de jos a tabelului (antet și subsol) va avea același aspect, astfel încât vom defini stilul comun pentru ei:
lea Element - descriere subsol va avea stil:
subsol Cell „și pentru care am stabilit deja cu antetul celulei de ansamblu“ și stilul, va avea o altă proprietate box-shadow. La antet umbra cade în umbra subsol va cădea în jos. Și, de asemenea, schimba culoarea textului:
Să ne întoarcem la Heder și subliniem faptul că în cazul în care celula este gol, atunci ar trebui să nu aibă nu orice stil, care este, să atribuie următoarele:
Iar pentru ultimul element al celulei antet va elimina marginea dreaptă:
Pentru prima celulă a antetului de masă și ultimele celule ale corpului va elimina frontiera:
Acum, adăugați stiluri pentru a celulelor este o descriere a celulelor corpului de masă, de exemplu, interiorul coloanei din stânga:
Și aceste stiluri pentru celulele de masă ale corpului:
Și lipiți pictograma pentru elementul SPAN.
Style 3 - .table3
Masa finală de astăzi, la care titlurile coloanelor vor avea culori diferite.
Stilul de bază pentru masa este:
Stilul general pentru toate celulele Th la cheder ar fi:
Celulele goale vor fi, fără fundal și chenar:
Și acum vrem să selecteze celule specifice th la celule cheder și td din subsol, și să dea fiecare dintre ele un aspect unic. Va folosi selectorul: nth-copil (număr):
Stil pentru toate celulele din subsol vor fi:
Adăugați padding la celulele:
Linia cu prețurile vom avea o mai mare și îndrăzneț:
coloana a corpului de masă va avea un stil alternativ, așa că vom folosi selectorul din nou: nth-copil. dar de data aceasta cu valorile pare și impare:
Adăugați frontiera dreapta pentru ultima TD în rândul:
Descriere Pe partea stângă este de stil:
Și adăugați pictograma:
Ei bine, că toate cele trei opțiuni demontate.
DESCARCĂ Leap: 2112
13.57 Kb care au descarcat?