Stilizarea tabelelor cu CSS - Lecțieinteresant si responsabil. Trebuie să abordați această afacere cu competență, cu cunoaștere a tuturor posibilităților stilurilor. În plus, trebuie să ai simțul frumuseții pentru a nu speria vizitatorii site-ului cu creativitatea ta.
Aproape orice poate fi transformat în tabele.Stilizarea frumos a tabelelor CSS înseamnă utilizarea chenarelor, fundalurilor de tabel, fundalurilor celulelor, spațierea și multe altele. Să luăm în considerare cele mai elementare.
Chenarul mesei
Stilul tabelului CSS implică întotdeaunajoc cu chenar (cadru). Toate tabelele nu sunt încadrate în mod implicit. Adică este egal cu 0 pixeli. Dar acest lucru poate fi rezolvat cu proprietatea de frontieră.
Puteți specifica un chenar exterior pentru întregul tabel:
tabel {border: 3px negru solid; }
Datorită acestei linii, toate tabelele de pe site auacolo unde se folosește acest stil va avea un chenar negru. Rețineți că chenarul este doar la margini, nu în interiorul mesei. Pentru celule și linii, cadrul este setat diferit.
th, td {chenar: 3px negru solid;}
Poate fi specificată orice grosime și culoare. Rețineți că marginile nu sunt dublate atunci când celulele sunt andocate.
Cuvântul solid înseamnă opera de artă solidă. Pot fi specificate și alte valori.
Cel mai adesea, se folosește o chenar solid, deoarece pare mai atractiv și nu distrage atenția de la conținutul principal al site-ului.
Proprietatea de frontieră poate fi specificată și dedirectii. Chenarul poate fi setat numai pentru partea de sus, de jos, din stânga sau din dreapta. Deoarece în unele cazuri opțiunea cu un cadru pentru întreaga masă nu este potrivită.
masă {border-top: 1px roșu continuu; }
În acest fel, puteți seta doar un chenar pentru partea de sus a tabelului. La fel pentru orice alte părți, doar în loc de sus scriem: dreapta, stânga sau jos.
Antetul tabelului
Titlul tabelului poate fi specificat folosind eticheta<legendă>. Această etichetă poate avea multe proprietăți în CSS pentru o reglare mai fină. Lucrul frumos despre CSS este că puteți manevra elementele așa cum doriți.
Acest titlu este afișat în același mod ca în mod normal în cărți (de exemplu, „Tabelul 1”).
De asemenea, puteți specifica locația acestei subtitrări cu proprietatea subtitrare (sus sau jos). Alinierea la stânga sau la dreapta este specificată de proprietatea text-align.
Fundal de masă
Fundalul mesei poate fi o culoare saudesen. Culoarea este setată de proprietatea background-color. Numele proprietăților sunt pe deplin în concordanță cu cele folosite în vorbire. Acest lucru face mai ușor de memorat de mai multe ori.
Culoarea poate fi specificată atât după nume, cât și prin diverse codificări. În plus, puteți specifica următoarele:
- Transparent - transparența elementului.
- Moștenire - culoarea este aceeași cu elementul părinte.
- Inițial este implicit.
Opțiunea cu transparență poate fi folosită în cazurile în care toate tabelele din textul din fișierul CSS sunt formatate cu aceeași culoare, dar în acest caz nu este nevoie.
În plus, fundalul poate fi o imagine. Pentru a face acest lucru, proprietatea imagine de fundal este scrisă în stil. Calea este indicată astfel:
url ("URL")
Calea către fișier poate fi relativă sau absolută.
Umplerea mai complexă se poate face cu un gradient:
- gradient-liniar ();
- radial-gradient ();
- repeating-linear-gradient () și repeating-radial-gradient () - repetă gradientul.
Fundalul celulei
Pe lângă fundalul ca întreg, puteți specifica un fundal alternativ în coloane sau rânduri. Această proprietate este folosită foarte des pentru decorare, deoarece separarea vizuală a liniilor face informațiile mai ușor de citit.
Pe lângă intercalare, puteți specifica și numărul unei anumite coloane sau rânduri. De exemplu astfel:
- tr: nth-child (even) {...} - specificarea intercalării liniilor;
- tr: nth-child (1) {...} - specificarea unei proprietăți a unui șir specific;
- td: nth-child (even) {...} - precizarea alternantei coloanelor;
- td: nth-child (1) {...} - specificarea unei proprietăți a unei anumite coloane.
Pe lângă alternanță și numere, puteți specifica - primul (td: primul copil) sau ultimul (td: ultimul copil).
Distanța dintre celule
În CSS, tabelele de stil vă permit să eliminați golurile dintre celule. Sunt acolo implicit. De exemplu, dacă setați o chenar într-un tabel fără a seta distanța dintre margini, veți obține următorul rezultat.
De acord, nu pare foarte frumos și nu este ușor de citit. Din această cauză, utilizatorii le vor ondula în ochi. Puteți elimina aceste lacune scriind următoarea linie în stilul tabelului:
border-colaps: colaps
Dar se mai întâmplă și că distanța, dimpotrivă, este necesarăcrește. Mai mult, dimensiunea golurilor poate fi specificată atât între coloane, cât și între rânduri. Pentru a face acest lucru, specificați următoarea valoare (în loc de colaps):
border-colaps: separat
Dar această acțiune va indica faptul că trebuie să împărțiți celulele. Cum să le separăm exact este indicat de o proprietate suplimentară:
distanță între margini: 20px.
Dacă trebuie să specificați o distanță diferită între rânduri și coloane, atunci sunt specificate două valori:
distanță între margini: 10px 20px.
Diferența între browsere
Rețineți că tabelele CSS pot arăta diferit în funcție de browser. Situația este mai ales proastă cu versiunile mai vechi, care nu acceptă inovații în CSS.
Mai sus este un exemplu de grosime a marginii pentru valori numerice.
Mai jos este un exemplu de lățime a cadrului pentru constante.
Stilurile de rame sunt, de asemenea, foarte diferite.
Prin urmare, atunci când dezvoltați, priviți întotdeauna rezultatul în diferite browsere.
În CSS, se recomandă proiectarea tabelelor cu verificarea tipului de browser. O problemă deosebit de mare era cu utilizatorii cu versiuni mai vechi de Internet Explorer.
Dezvoltatorii foarte avansați pot include fișiere CSS complet diferite în funcție de browser. Și cineva face verificări în fiecare sau în orice stil specific (clasă).
Majoritatea problemelor apar cu umbrele.
CSS: aspect tabel, exemple
Iată exemple de tabele diferite. Imaginea de mai sus arată utilizarea înclinării și a jocului cu culorile de fundal și chenar.
Mulți oameni vor fi interesați de un exemplu de design frumos, îngrijit, care nu va răni ochii utilizatorilor. Această opțiune este potrivită în aproape orice situație.
Marginile pot fi rotunjite. Arata destul de bine.
concluzie
După cum puteți vedea, pentru a stila aspectul meselor înExistă un număr mare de instrumente CSS acolo. Fiecare parametru are, de asemenea, un număr mare de opțiuni de valoare. Dacă folosiți toate acestea simultan, puteți crea capodopere. Mai ales dacă faci un design responsive pentru toate browserele.
Principalul lucru atunci când proiectați este să nu exagerațiefecte. Totul ar trebui făcut cu moderație. La început, designerilor de layout le place să experimenteze și să-și folosească toate cunoștințele simultan. Ca urmare, tabelele se dovedesc a fi suprasaturate cu proprietăți. Încercați să evitați aceste greșeli.
În plus, unii parametri pot interfera între ei. De exemplu, nu este nevoie să specificați culoarea de fundal a tabelului, dacă în același timp există și o imagine de fundal care se va suprapune cu culoarea specificată.
