Stiluri pentru tabelele CSS. Aliniați conținutul celulei. Borduri și rame
Design de mese cu folosind CSS- ocupația este interesantă și responsabilă. Trebuie să abordați această chestiune în mod competent, 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. Design frumos Tabelele CSS implică utilizarea designului chenarului, fundalului tabelului, fundalul celulei, spațiul dintre ele și multe altele. Să ne uităm la cele mai elementare lucruri.
Bordura tabelului
Stilul tabelului CSS implică întotdeauna jocul cu chenar (border). Toate tabelele nu sunt înconjurate implicit de un chenar. Adică este egal cu 0 pixeli. Dar acest lucru poate fi rezolvat folosind proprietatea de frontieră.
Puteți specifica cadru exterior pentru intregul tabel:
tabel (chenar: 3px negru solid; )
Datorită acestei linii, toate tabelele de pe site care folosesc acest stil vor avea un chenar negru. Rețineți că chenarul este doar în jurul marginilor, nu în interiorul mesei. Pentru celule și rânduri, cadrul este setat diferit.
th, td (chenar: 3px negru solid;)
Puteți specifica orice grosime și culoare. Rețineți că granițele nu sunt dublate atunci când celulele sunt unite.
Cuvântul solid înseamnă design continuu. Puteți specifica alte valori.
Cel mai adesea, se folosește un cadru solid pentru că arată mai atractiv și nu distrage atenția de la conținutul principal al site-ului.
Proprietatea de frontieră poate fi specificată și în direcții. Chenarul poate fi setat doar pentru partea de sus, de jos, din stânga sau din dreapta. Pentru că în unele cazuri opțiunea cu un cadru pentru întreaga masă deodată nu este potrivită.
tabel (chenar-sus: 1px roșu continuu; )
În acest fel, puteți seta un chenar numai pentru partea de sus a tabelului. În mod similar pentru orice alte părți, doar în loc de sus scriem: dreapta, stânga sau jos.
Titlul tabelului
Titlul tabelului poate fi specificat folosind o etichetă
Acest titlu este afișat în același mod ca standard în cărți (de exemplu, „Tabelul 1”).
De asemenea, puteți specifica locația acestui titlu folosind 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 de orice culoare sau model. Culoarea este specificată de proprietatea background-color. Numele proprietăților corespund pe deplin cu cele folosite în vorbire. Acest lucru face memorarea mult mai ușoară.
Culoarea poate fi indicată fie prin nume, fie diferite codificări. În plus, puteți specifica următoarele:
- Transparent - element de transparență.
- Moștenire - culoarea este aceeași ca element părinte.
- Inițială - valoare implicită.
Opțiunea de transparență poate fi utilizată în cazurile în care toate tabelele din textul din fișierul CSS sunt proiectate în aceeași culoare, dar în în acest caz, nu există o astfel de nevoie.
În plus, fundalul poate fi o imagine. Pentru a face acest lucru, proprietatea imagine de fundal este specificată în stil. Calea este indicată astfel:
Calea către fișier poate fi relativă sau absolută.
O umplere mai complexă poate fi realizată cu un gradient:
- gradient-liniar();
- gradient-radial();
- repeating-linear-gradient() și repeating-radial-gradient() - repetarea gradientului.
Fundalul celulei
Pe lângă fundalul în ansamblu, puteți seta un fundal alternativ în coloane sau rânduri. Pentru design, această proprietate este folosită foarte des, deoarece separarea vizuală a liniilor face informațiile mai ușor de citit.
Pe lângă alternanță, puteți specifica și numărul unei anumite coloane sau rânduri. De exemplu astfel:
- tr:nth-child (even) ( ... ) - indicarea alternantei liniilor;
- tr:nth-child (1) ( ... ) - indicând proprietatea unui anumit rând;
- td:nth-child (even) ( ... ) - indicând alternanța coloanelor;
- td:nth-child (1) ( ... ) - indicând proprietatea unei anumite coloane.
Pe lângă alternanță și numere, puteți specifica primul (td:first-child) sau ultimul (td:last-child).
Spațiul dintre celule
În CSS, stilul tabelului vă permite să eliminați spațiile dintre celule. Implicit sunt. De exemplu, dacă setați un cadru într-un tabel fără a seta distanța dintre margini, veți obține următorul rezultat.
De acord, nu arată foarte frumos și nu este convenabil pentru citit. Utilizatorii vor avea o undă în ochi din cauza asta. Puteți elimina aceste lacune scriind următoarea linie în stilul tabelului:
border-colaps: colaps
Dar se întâmplă și că distanța, dimpotrivă, trebuie mărită. 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ă celulele trebuie împărțite. Cum să le separăm exact este indicat de o proprietate suplimentară:
distanță între margini: 20px.
Dacă trebuie să specificați distanta diferitaîntre rânduri și coloane, atunci sunt indicate două valori:
distanță între margini: 10px 20px.
Diferențele de browser
Rețineți că stilul tabelului în CSS poate 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 valorile digitale.
Stilurile de cadre variază, de asemenea, foarte mult.
Prin urmare, atunci când dezvoltați, priviți întotdeauna rezultatul în diferite browsere.
Dezvoltatorii foarte avansați se pot conecta complet diferit fișiere CSS. Și cineva face verificări în fiecare sau în orice stil specific (clasă).
Cele mai multe probleme apar cu umbrele.
CSS: design de tabel, exemple
Designul poate fi foarte divers. Totul depinde de site-ul ca întreg și de designul acestuia. Totul ar trebui combinat și nu plin de culori. Gustul dezvoltatorului joacă, de asemenea, un rol important. Simțul frumuseții al fiecăruia este diferit.
Iată exemple de diferite tabele. Imaginea de mai sus arată utilizarea înclinării și jocul cu și limitele.
Mulți 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 frumos.
Concluzie
După cum puteți vedea, pentru înregistrare aspect tabele în CSS există o cantitate mare unelte. Fiecare parametru are, de asemenea, un număr mare de valori posibile. Dacă folosești toate acestea deodată, poți crea capodopere. Mai ales dacă o faci pentru toate browserele.
Principalul lucru atunci când proiectați este să nu exagerați cu efectele. Totul trebuie 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, mesele ajung să fie 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ă este și aceasta setată acolo imagine de fundal, care se va suprapune pe culoarea specificată.
În trecutul recent, popularitatea tabelelor a fost incredibil de mare, acestea au fost folosite nu numai pentru a prezenta date tabelare, ci au fost și mijlocul principal de formare a structurii unui document (în ciuda o serie de dezavantaje). În prezent, elementul bloc DIV este din ce în ce mai utilizat pentru aspectul documentului.
Masa rămâne elementul principal limbaj HTML, care este indispensabil pentru crearea structurilor complexe și pentru prezentarea datelor tabulare, unde elementele bloc sunt neputincioase și nu au o asemenea variabilitate.
Baza mesei
Tabelul este o structură complexă și este format din mai multe Etichetă HTML ov. În prima etapă, este construit din element bloc
, care reprezintă fundația, baza tabelului. Următoarea etapă în construcție este rânduri de tabel, care sunt formate folosind etichete pereche
:
Etapa finală a construcției mesei este creând celule. Există două categorii de etichete în acest scop:
- eticheta asociată creează o celulă care servește ca antet de coloană, această etichetă este optional; - un tag pereche obligatoriu creează celule - baza tabelului;
| Titlul 1 | Titlul 2 | Titlul 3 | Titlul 4 | Titlul 5 |
|---|---|---|---|---|
| Celula 1,1 | Celula 1,2 | Celula 1.3 | Celula 1.4 | Celula 1.5 |
| Celula 2.1 | Celula 2,2 | Celula 2,3 | Celula 2.4 | Celula 2.5 |
| Rezultatul 1 | Rezultatul 2 | Rezultatul 3 | Rezultatul 4 | Rezultatul 5 |
Fig 1. Tabel
După cum puteți vedea din codul de mai sus, tabelul conține patru rânduri (
Atenție la structura tabelului; are o structură ierarhică imbricată strict; dacă îl rupeți și rearanjați etichetele într-o altă ordine, tabelul fie nu va fi afișat pe pagină, fie va fi afișat, dar nu corect. Reguli de bază atunci când proiectați un tabel:
- Etichetă asociată
baza tabelului, toate celelalte etichete sunt imbricate în ea;
- Etichetă asociată
al doilea nivel al tabelului sau rândul său trebuie să fie imbricate într-o etichetă ;
- Etichete pereche
Și al treilea nivel al tabelului sau celulele acestuia trebuie imbricate într-o etichetă și conține date tabelare; - Dacă plasați orice altă etichetă sau text în afara etichetei potrivite
, atunci aceste date vor fi ignorate și nu vor fi afișate pe pagina web; Titlul tabelului
Tabelul oferă posibilitatea de a adăuga un titlu folosind o etichetă asociată
. În principiu, poate fi inserat oriunde în tabel; aceasta nu este o eroare. În mod implicit, textul antetului apare deasupra tabelului.
Antet tabel Titlul 1 Titlul 2 Titlul 3 Titlul 4 Titlul 5 Celula 1,1 Celula 1,2 Celula 1.3 Celula 1.4 Celula 1.5 Celula 2.1 Celula 2,2 Celula 2,3 Celula 2.4 Celula 2.5 Rezultatul 1 Rezultatul 2 Rezultatul 3 Rezultatul 4 Rezultatul 5 
Orez. 2. Tabel cu titlu.
Secțiuni de tabel
Folosind secțiuni, care sunt etichete împerecheate, tabelul poate fi împărțit în părți logice. Acestea nu sunt afișate de browser pe pagină, dar puteți seta o reprezentare diferită pentru fiecare dintre ele. Există următoarele trei părți logice:
-
- Secțiunea anteturi de coloane;
- - Sectiune baza mesei;
- - Secțiunea rezumat, care rezumă întregul tabel;
,
, , sunt plasate în interiorul meseiși trebuie să conțină etichete
: ), utilizați atributul ROWSPAN cu o valoare de 2:Antet tabel Titlul 1 Titlul 2 Titlul 3 Titlul 4 Titlul 5 Celula 1,1 Celula 1,2 Celula 1.3 Celula 1.4 Celula 1.5 Celula 2.1 Celula 2,2 Celula 2,3 Celula 2.4 Celula 2.5 Rezultatul 1 Rezultatul 2 Rezultatul 3 Rezultatul 4 Rezultatul 5 Unirea celulelor
Mai sus ne-am uitat la un tabel cu o structură simplă, dar dacă trebuie să îl complicați, de exemplu, combinați mai multe celule într-una singură. Există atribute speciale pentru acest caz COLSPANȘi ROWSPAN Etichete
Și . Primul este folosit pentru a combina orizontal, al doilea pe verticală. Valoarea atributului este numărul de celule care trebuie îmbinate: 1. Pentru a îmbina pe orizontală primele patru celule ultima linie tabel, cerut de atributul COLSPAN al etichetei
(care conține textul „Total 1”) atribuiți valoarea 4: Total (1+2+3+4) 2. Pentru a îmbina celulele pe verticală partea principală a documentului (partea
Celulă (1,1+2,1) Celulă (1,2+2,2) Celulă (1,3+2,3) Celulă (1,4+2,4) Vă rugăm să rețineți că dacă combinați celule cu atributele COLSPAN sau ROWSPAN, trebuie să eliminați celulele îmbinate din cod, cu excepția celei cu care începe îmbinarea, numărul acestora va depinde de valoarea atributului COLSPAN, ROWSPAN.
Adică, în exemplul 1, patru celule sunt îmbinate, începând cu prima, căreia i se atribuie atributul COLSPAN=4 (întrucât îmbinarea începe cu acesta), celelalte trei trebuie șterse (întrucât sunt considerate îmbinate). Doar a cincea celulă va rămâne în cod (din moment ce nu este inclusă în unire).
Același principiu se va aplica unificării verticale. În al doilea exemplu, primelor patru celule ale rândului li se atribuie atributul ROWSPAN=2, ca urmare primele patru celule inferioare sunt eliminate din cod, deoarece sunt considerați uniți. Cu excepția ultimului, care nu este inclus în asociație.
Antet tabel Titlul 1 Titlul 2 Titlul 3 Titlul 4 Titlul 5 Celulă (1,1+2,1) Celulă (1,2+2,2) Celulă (1,3+2,3) Celulă (1,4+2,4) Celula 1.5 Celula 2.5 Total 1+ Total 2+ Total 3+ Total 4 Rezultatul 5 
Orez. 4. Asociere celule de tabel folosind atributele COLSPAN, ROWSPAN.
Mese de toaleta cu proprietati CSS
După crearea tabelului folosind HTML, trecem la etapa următoare, proiectând tabelul folosind stiluri CSS care sunt aplicabile etichetelor
,
, , . Cadre celulare
Puteți desena un chenar în jurul celulelor folosind proprietățile CSS frontieră, cu următoarea sintaxă:
Chenar: „grosime linie” „tip font” „culoare”;
- grosimea liniei- poate fi specificat în pixeli (px), precum și folosind cuvinte speciale rezervate: subțire (2 px), mediu (4 px) și gros (6 px);
- tipografie- valorile atributelor sunt cuvinte speciale: punctat (linie punctată), punct (linie punctată), continuă (linie), dublu (linie dublă), etc.
Fig 5. Aplicarea proprietății border la celulele tabelului pentru a încadra fiecare celulă cu un cadru.
Dacă doriți ca cadrul să fie doar între celule și să nu încadreze fiecare separat, trebuie să utilizați proprietatea stil frontieră-colaps, luând valoarea:
- colaps- între celule există un singur cadru;
- separa- fiecare celulă este încadrată de propriul cadru;
Figura 6. Aplicarea proprietății border-collapse la un tabel. Celulele adiacente sunt separate printr-un cadru.
Dimensiunile celulelor
În mod implicit, browserul formează dimensiunile celulelor în funcție de conținutul lor, dacă este necesar, setat formă statică, utilizați proprietatea stil width, height. În acest caz, dacă conținutul celulei nu se potrivește pe o linie, atunci este transferat pe următoarea.
Fig 7. Utilizarea proprietăților de lățime și înălțime pentru a seta lățimea și înălțimea celulelor.
Umplutură celulară
Există două tipuri de indentări, externe și interne, primul tip de indentare este stabilit între marginile celulelor adiacente, al doilea de la marginile celulelor până la conținutul acestora. Proprietățile CSS care creează indentarea sunt enumerate mai jos:
- umplutura- padding intern, valoarea este setata in pixeli (px);
- spaţierea graniţelor - marginea, valoarea este setată și în pixeli (px). Acest parametru nu ar trebui folosit dacă (border-collapse:collapse), deoarece indentarea este stabilită între marginile celulelor adiacente, iar dacă proprietatea specificată este prezentă, celulele adiacente sunt separate doar de un singur cadru;
Orez. 8. Aplicarea proprietății padding la tabel pentru a seta indentări.
Locația antetului
În mod implicit, antetul tabelului este situat deasupra acestuia, dar poziția poate fi schimbată folosind proprietatea stil partea de subtitrare, care ia următoarele valori:
- top- titlul este situat deasupra tabelului;
- fund- titlul este situat sub tabel;
Culoarea celulei
Pentru a picta o celulă cu o anumită culoare, trebuie să utilizați proprietatea culoare de fundal:
Orez. 10. Alinierea conținutului celulelor cu proprietățile text-align și vertical-align.
Stilizarea conținutului celulei
Formatarea conținutului se referă la formatarea textului conținut în celule. Bazele proprietate CSS, folosit în acest scop este font:
Orez. 11. Decorarea conținutului celulei cu proprietatea fontului.
Toate stilurile CSS aplicate tabelului
Tabelele sunt un element utilizat pe scară largă pentru prezentarea diferitelor date în prezentări, prelegeri etc. pliante publicitare si nu numai. Datorită clarității, versatilității și simplității lor, tabelele sunt, de asemenea, utilizate pe scară largă pe site-uri web pentru a transmite mai bine cititorului materialul necesar. Adăugând întreaga putere a stilurilor la tabele, puteți încadra cu succes tabele în designul site-ului web și puteți prezenta datele tabulare în mod clar și frumos.
Lățimea mesei
În mod implicit, lățimea tabelului este setată de browser însuși, pe baza volumului de date tabelare din acesta. Dacă există mult text în celule, atunci tabelul va ocupa întreaga lățime disponibilă, iar dacă nu există suficient text, atunci lățimea tabelului va scădea automat. Dacă există mai multe tabele pe o pagină, diferitele lor lățimi par uneori neglijente. Deci, este mai bine să setați în mod explicit lățimea tabelului în procente, pixeli, em sau oricare altul unități CSS, așa cum se arată în exemplul 1.
Exemplul 1: Lățimea tabelului în procente
Tabel ( lățime: 100%; ) .tbl-mediu ( lățime: 60%; ) .tbl-small ( lățime: 200px; )
ÎN în acest exemplu lățimea 100% se aplică tuturor tabelelor. Din nou, clasele ajută la setarea lățimii pentru tabelele selectate folosind o clasă creată anterior. Pentru a da tabelului o lățime de 200 de pixeli, trebuie să adăugați elementului
clasa tbl-mic .
Alinierea tabelului
Inițial, orice tabel este situat pe marginea stângă a ferestrei browserului. Îl puteți alinia la centru, cu excepția cazului în care tabelul ocupă întreaga zonă disponibilă, cu alte cuvinte, mai puțin de 100%. Pentru a face acest lucru, adăugați indentări la stilul tabelului folosind proprietatea margine cu valoarea auto , așa cum se arată în exemplul 2.
Exemplul 2: Alinierea unui tabel folosind marginea
Masa ...
În acest exemplu, toate tabelele de pe pagină sunt setate la alinierea la centru.
Culoare de fundal
Culoarea de fundal a tuturor celulelor tabelului în același timp este setată prin proprietatea de fundal, care este aplicată selectorului de tabel. În acest caz, ar trebui să vă amintiți regulile de utilizare a stilurilor, în special, moștenirea proprietăților elementului. Dacă în același timp cu tabelul setați o culoare pentru selectorul td sau th, atunci aceasta va fi setată ca fundal (exemplul 3).
Exemplul 3: Culoare de fundal
Masa Tipul conexiunii Arbore Mânecă Gratuit H9 D10 Normal N9 eu s 9 Dens P9 Rezultatul acestui exemplu este prezentat în Fig. 1.
Orez. 1. Schimbați culoarea de fundal
Dacă vrem să facem un model zebră, care este numele dat liniilor alternative de culori diferite, atunci ar trebui să folosim pseudo-clasa :nth-child, adăugându-l la selectorul tr. Pentru ca zebra să se extindă numai la corpul mesei și nu la antetul acesteia, le separăm una de cealaltă folosind elemente Și
(exemplul 4).Exemplul 4: Crearea unei zebre
Masa Intervale de dimensiuni, mm Toleranță IT, µm, pentru calificări 5 6 7 8 Pana la 3 4 6 10 14 Sf. 3 la 6 5 8 12 18 Sf. 6 la 10 6 9 15 22 Sf. 10 la 18 8 11 18 27 Sf. 18 la 30 9 13 21 33 Sf. 30 la 50 11 16 25 39 Sf. 50 la 80 13 19 30 46 Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Zebra
Valoarea pară a selectorului :nth-child aplică stilul tuturor rândurilor cu numere pare și stabilește culoarea de fundal. Apoi, îl puteți schimba și în impar gri Rândurile impare vor fi evidențiate.
În mod similar, coloanele, nu rândurile, sunt evidențiate cu culoare; pentru aceasta ar trebui să utilizați selectorul tbody td:nth-child(even) .
Margini din interiorul celulelor
Marja este distanța dintre marginea celulei și conținutul acesteia. Fără margini, textul din tabel „se lipește” de cadru, afectând astfel percepția acestuia, dar adăugarea de margini îmbunătățește lizibilitatea textului. În acest scop, este utilizată proprietatea stilului de umplutură, care funcționează cu selectorul td sau th, așa cum se arată mai sus în exemplele 3 și 4. De obicei este specificată o valoare, care specifică apoi spațiu golîn jurul conținutului celulei din toate părțile simultan. Sunt scrise două valori atunci când trebuie să setați câmpuri diferite vertical (prima valoare) și orizontal (a doua valoare).
Distanța dintre celule
Există o cantitate mică de spațiu gol între celule care nu este vizibilă decât dacă setați o culoare de margine sau de fundal pentru celule. Această spațiere este inițial de 2 px și poate fi modificată folosind proprietatea border-spacing adăugând-o la selectorul de tabel (Exemplul 5).
Exemplul 5: Folosind marginea spațierii
Tabel (border-spacing: 3px; /* Spațiu între celule */ ) thead th ( fundal: #e08156; /* Culoare fundal antet */ culoare: #333; /* Culoare text */ ) td, th ( padding: 5px ; /* Câmpurile din celule */ fundal: #4c715b; /* Culoarea de fundal a celulelor */ culoare: #f5e8d0; /* Culoare text */ )
Adăugând acest stil la orice tabel, obținem rezultatul prezentat în Fig. 3.
Orez. 3. Vedere tabel cu distanța dintre celule
Dacă adăugați la masă proprietate de frontieră- collapse cu valoarea collapse , apoi se ignoră distanța dintre margini, deoarece nu mai există distanță între celule.
Borduri și rame
Pentru a separa în mod clar conținutul unei celule de cealaltă, celulele sunt adăugate margini. Acestea sunt create de proprietatea stilului de chenar, care se aplică elementelor (
sau ). Cu toate acestea, iată-ne că suntem în cale roci subacvatice. Deoarece se creează un cadru pentru fiecare celulă, se obține un chenar de grosime dublă acolo unde celulele se ating. Există mai multe moduri de a elimina această caracteristică. Cel mai simplu este să folosiți proprietatea border-collapse cu valoarea collapse . Sarcina sa este să urmărească contactul liniilor și, în loc de un chenar dublu, să înfățișeze unul singur. Trebuie doar să adăugați această proprietate la selectorul de tabel și apoi va face totul pe cont propriu (exemplul 6). Exemplul 6: Utilizarea proprietății border-collapse la crearea chenarelor de tabel
Masa O X X O O X X X O Diferența dintre marginile tabelului cu și fără proprietatea border-collapse este prezentată în Fig. 4.
Orez. 4. Vizualizarea tabelului când se folosește border-collapse
În fig. Figura 4a prezintă cadrul implicit al tabelului. Vă rugăm să rețineți că în interiorul tabelului toate liniile au grosime dublă. Adăugarea colapsului chenarului elimină această caracteristică, iar grosimea tuturor liniilor devine aceeași (Fig. 4b).
Liniile nu trebuie să fie pe toate părțile celulelor, dar pot fi proiectate pentru a separa un rând sau o coloană de alta. Pentru a face acest lucru, folosim border-bottom , border-left și alte proprietăți similare. Aplicați chenare elementelor
, , Și Acest lucru nu este posibil, așa că le adăugăm la tabel și la selectorul td (exemplul 7).Exemplul 7. Linii între linii
Masa Tipul conexiunii Câmpuri de toleranță pentru lățimea canalului de cheie Arbore Mânecă Gratuit H9 D10 Normal N9 eu s 9 Dens P9 Rezultatul acestui exemplu este prezentat în Fig. 5.
Orez. 5. Tabel cu linii orizontale
În mod implicit, textul dintr-o celulă de tabel este aliniat la stânga și aliniat la centru. Excepția este elementul
, definește o celulă antet în care alinierea este centrată. Pentru a schimba metoda de aliniere, utilizați un stil proprietatea text-align(exemplul 8). Exemplul 8: Alinierea conținutului celulei pe orizontală
Masa Titlul 1 Celula 1 Celula 2 Titlul 2 Celula 3 Celula 4 În acest exemplu, conținutul
este aliniat la stânga, iar conținutul - in centru. Rezultatul exemplului este prezentat mai jos (Fig. 6). 
Orez. 6. Alinierea textului în celule
Alinierea verticală într-o celulă este întotdeauna centrată, dacă nu este menționat altfel. Acest lucru nu este întotdeauna convenabil, mai ales pentru tabelele al căror conținut de celule variază în înălțime. În acest caz, alinierea este setată la marginea superioară a celulei folosind proprietatea de aliniere verticală cu o valoare top , așa cum se arată în Exemplul 9.
Exemplul 9. Alinierea conținutului celulei pe verticală
Masa Tipul conexiunii Câmpuri de toleranță pentru lățimea canalului de cheie Arbore Mânecă Gratuit H9 D10 Normal N9 eu s 9 Dens P9 În acest exemplu, textul este aliniat la marginea de sus. Rezultatul exemplului este prezentat în Fig. 7.
Date tabelare- informații care pot fi afișate într-un tabel și împărțite logic în coloane și rânduri. Eticheta HTML este folosită pentru a afișa date tabelare pe paginile web
, care este un recipient cu conținutul tabelului. Conținut HTML tabelele sunt descrise rând cu rând, fiecare linie începe cu o etichetă de deschidere
și se termină cu o etichetă de închidere .În interiorul unei etichete
sunt localizate celulele tabelului reprezentate prin etichete sau . Sunt celulele care conțin tot conținutul tabelului afișat pe pagina web. Cadru de masă
În mod implicit, un tabel HTML pe o pagină web este afișat fără margine; pentru a adăuga un chenar la tabel, la fel ca toate celelalte elemente, este utilizată proprietatea de margine CSS. Dar merită să acordați atenție faptului că dacă adăugați un cadru doar unui element
, apoi va fi afișat în jurul întregului tabel. Pentru ca celulele tabelului să aibă și un chenar, va trebui să setați proprietatea chenar pentru elemente
Și . Tabel, th, td (chenar: 1px negru solid; ) Încercați »
Acum, atât tabelul, cât și celulele au margini, iar fiecare celulă și tabel au propriile margini. Ca urmare, între cadre a apărut spațiu gol; dimensiunea acestui spațiu poate fi controlată de proprietatea de spațiere a frontierei, care este setată pentru întregul tabel. Cu alte cuvinte, nu puteți controla distanța dintre diferite celule în mod individual.
Chiar dacă eliminați spațiile dintre celule folosind valoarea proprietății de spațiere a marginilor 0, marginile celulelor se vor atinge reciproc, dublând dimensiunea. Pentru a combina marginile celulelor, utilizați proprietatea border-collapse. Poate avea două semnificații:
- separat: este valoarea implicită. Celulele sunt afișate pe o distanta scurta unul de celălalt, fiecare celulă are propriul cadru.
- colaps: unește cadrele adiacente într-unul singur, toate spațiile dintre celule, precum și dintre celule și cadrul tabelului, sunt ignorate.
Numele documentului Nume Nume de familie Homer Simpson Marge Simpson
Încerca "Nume Nume de familie Homer Simpson Marge Simpson Dimensiunea mesei
După adăugarea de margini la celulele tabelului, a devenit vizibil că conținutul celulelor era prea aproape de margini. Pentru a adăuga spațiu între marginile celulelor și conținutul acestora, puteți utiliza proprietatea de umplutură:
Th, td ( umplutură: 7px; ) Încercați »
Dimensiunea unei mese depinde de conținutul acesteia, dar adesea apar situații când masa este prea îngustă și devine necesară întinderea acesteia. Lățimea și înălțimea tabelului pot fi modificate utilizând proprietățile de lățime și înălțime prin specificare dimensiunile cerute sau tabelul sau celulele în sine:
Tabel (lățime: 70%; ) al (înălțime: 50px; ) Încercați »
Alinierea textului
În mod implicit, textul din celulele antetului tabelului este aliniat la centru, în timp ce textul din celulele obișnuite este aliniat la stânga; folosind proprietatea text-align puteți controla alinierea orizontală a textului.
Proprietatea CSS de aliniere verticală vă permite să controlați alinierea verticală a conținutului textului. În mod implicit, textul este aliniat vertical la centrul celulelor. Aliniere verticală poate fi suprascris folosind una dintre valorile proprietăților de aliniere verticală:
- sus: textul este aliniat la marginea superioară a celulei
- mijloc: aliniază textul la centru (implicit)
- jos: textul este aliniat la limita inferioara celule
Numele documentului
Încerca "Nume Nume de familie Homer Simpson Marge Simpson Alternarea culorii de fundal a rândurilor de tabel
În timpul vizionarii mese mari conţinând multe rânduri cu o cantitate mare informații, poate fi dificil să urmăriți ce date aparțin unui anumit rând. Pentru a ajuta utilizatorii să-și găsească drumul, puteți utiliza alternativ două culori diferite de fundal. Pentru a crea efectul descris, puteți folosi selectorul de clasă, adăugându-l la fiecare al doilea rând al tabelului:
Numele documentului
Încerca "Nume Nume de familie Poziţie Homer Simpson Tată Marge Simpson mamă Bart Simpson fiul Lisa Simpson fiica Adăugarea unui atribut de clasă la orice altă linie este destul de plictisitoare. Pseudo-clasa:nth-child a fost adăugat la CSS3 pentru a oferi o soluție alternativă la această problemă. Acum efectul de alternanță poate fi realizat exclusiv folosind CSS fără a modifica marcajul HTML al documentului. Folosind pseudo-class:nth-child, puteți selecta toate rândurile pare sau impare ale unui tabel folosind unul dintre Cuvinte cheie: par (par) sau impar (impar):
Tr:nth-child(odd) (culoare de fundal: #EAF2D3; ) Încercați »
Schimbați fundalul rândului la trecerea cursorului
O altă modalitate de a îmbunătăți lizibilitatea datelor tabelare este schimbarea culoare de fundal linie când treceți cursorul mouse-ului peste ea. Acest lucru va ajuta la evidențierea conținutului dorit al tabelului și la creșterea percepției vizuale a datelor.
Implementarea unui astfel de efect este foarte simplă; pentru a face acest lucru, trebuie să adăugați o pseudo-clasă:hover la selectorul de rânduri de tabel și să setați culoarea de fundal dorită:
Tr:hover (culoare de fundal: #E0E0FF; ) Încercați »
Alinierea unei mese la centru
Alinierea HTML Centrarea unui tabel este posibilă numai dacă lățimea tabelului este mai mică decât lățimea elementului părinte. Pentru a alinia tabelul la centru, trebuie să utilizați proprietatea marjă, dându-i cel puțin două valori: prima valoare va fi responsabilă pentru marginea exterioară a tabelului din partea de sus și de jos, iar a doua valoare va fi responsabilă pentru alinierea automată la centru:
Tabel (marja: 10px automat; ) Încercați »
Dacă aveți nevoie diferite indentăriîn partea de sus și de jos a tabelului, puteți seta proprietatea marginii la trei valori: prima va fi responsabilă pentru marginea superioară, a doua pentru alinierea orizontală și a treia pentru marginea inferioară:
Tabel (marja: 10px automat 30px; )
Tabelele în sine arată destul de slab, iar browserele afișează unele caracteristici ale tabelului, în special cadrele, în felul lor. În același timp, aceste neajunsuri pot fi corectate cu ușurință folosind puterea stilurilor. În același timp, mijloacele pentru proiectarea tabelelor sunt mult extinse, ceea ce vă permite să încadrați cu succes tabelele în designul site-ului și să prezentați mai clar datele tabelare.
Culoarea de fundal a celulei
Culoarea de fundal a tuturor celulelor tabelului în același timp este setată prin proprietatea de fundal, care este aplicată selectorului TABLE. În acest caz, ar trebui să vă amintiți regulile de utilizare a stilurilor, în special, moștenirea proprietăților elementului. Deși proprietatea de fundal nu este moștenită, valoarea implicită de fundal pentru celule este transparentă, de exemplu. transparență, astfel încât efectul de umplere a fundalului se obține și pentru celule. Dacă, simultan cu TABLE, setați culoarea selectorului TD sau TH, atunci această culoare va fi setată ca fundal al celulei (exemplul 2.3).
Exemplul 2.3. Culoare de fundal
Mese Titlul 1 Titlul 2 Celula 3 Celula 4 În acest exemplu obținem Culoarea albastră fundalul celulei (etichetă
) și roșu la titlu (tag ). Acest lucru se datorează faptului că stilul pentru selectorul TH nu este definit, astfel încât fundalul părintelui, în acest caz selectorul TABLE, este „afișat prin”. Și culoarea pentru selectorul TD este specificată în mod explicit, astfel încât celulele sunt „umplute” cu albastru. Rezultatul acestui exemplu este prezentat în Fig. 2.4.
Orez. 2.4. Schimbarea culorii de fundal
Margini din interiorul celulelor
Marja este distanța dintre marginea conținutului unei celule și marginea acesteia. De obicei, atributul cellpadding al unei etichete este folosit în acest scop.
. Acesta definește valoarea marjei în pixeli pe toate părțile celulei. Este posibil să utilizați proprietatea stilului de umplutură adăugând-o la selectorul TD, așa cum se arată în Exemplul 2.4.
Exemplul 2.4. Câmpurile din tabele
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Mese Titlul 1 Titlul 2 Celula 3 Celula 4 În acest exemplu, prin gruparea selectoarelor, câmpurile sunt setate simultan pentru selectoarele TD și TH. Rezultatul exemplului este prezentat în Fig. 2.5.
Orez. 2.5. Câmpuri în celule
Dacă proprietatea stilului de umplutură este aplicată celulelor tabelului, atunci efectul atributului cellpadding al etichetei
ignorat.
Distanța dintre celule
Pentru a modifica distanța dintre celule, utilizați atributul cellspacing al etichetei
. Efectul acestui atribut este clar vizibil atunci când utilizați chenare în jurul celulelor sau când umpleți celulele cu o culoare care iese în evidență din fundalul paginii. Proprietatea de stil border-spacing acționează ca un înlocuitor pentru cellspacing; stabilește distanța dintre marginile celulelor. O valoare setează atât distanța verticală, cât și cea orizontală dintre marginile celulei. Dacă această proprietate are două valori, atunci prima determină distanța orizontală (adică la stânga și la dreapta celulei), iar a doua determină distanța verticală (de sus și dedesubt).
Proprietatea de spațiere a marginilor are efect numai dacă selectorul TABLE nu are proprietatea de restrângere a marginilor setată la restrângere (Exemplul 2.5).
Exemplul 2.5. Distanța dintre marginile celulei
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Înlocuirea distanței dintre celule Leonardo 5 8 Rafael 4 11 Michelangelo 24 9 Donatello 2 13 Rezultatul acestui exemplu este prezentat în Fig. 2.6.
Orez. 2.6. Vizualizare tabel atunci când se utilizează spațierea la margini
Browser Internet Explorer versiunile până la și inclusiv versiunea 7 nu acceptă proprietatea de spațiere a marginilor, așa că în acest browser se va folosi valoarea implicită a spației celulelor (de obicei 2px) pentru tabele.
Când se adaugă o proprietate border-collapse cu o valoare de colaps la un selector TABLE, atributul cellspacing este ignorat, iar valoarea margine-spacing este resetata la zero.
Borduri și rame
În mod implicit, inițial nu există chenar în tabel, iar adăugarea acestuia are loc utilizând atributul chenar al etichetei
. Browserele afișează un astfel de chenar în mod diferit, așa că este mai bine să nu specificați deloc acest atribut și să lăsați desenul chenarelor pe seama stilurilor. Să ne uităm la două metode direct legate de stiluri.
Folosind atributul cellspacing
Se știe că atributul cellspacing al etichetei
stabilește distanța dintre celulele tabelului. Dacă utilizați culori diferite de fundal pentru tabel și celule, atunci va apărea o grilă de linii între celule, a cărei culoare se potrivește cu culoarea tabelului, iar grosimea este egală cu valoarea atributului de spațiere a celulelor în pixeli. Exemplul 2.3 de mai sus arată acest efect, așa că nu îl voi repeta.
Rețineți că acest lucru nu este în totalitate mod convenabil creând limite pentru că are o sferă limitată. În acest fel puteți obține doar o grilă cu o singură culoare, și nu verticală sau linii orizontaleîn locurile potrivite.
Folosind proprietatea de frontieră
Proprietatea stil de chenar setează simultan culoarea, stilul și grosimea chenarului în jurul unui element. Când trebuie să creați linii separate laturi diferite, este mai bine să folosiți derivatele - border-left , border-right , border-top și border-bottom , aceste proprietăți definesc respectiv chenarul din stânga, dreapta, sus și jos.
Aplicând proprietatea border la un selector TABLE, adăugăm un chenar în jurul tabelului ca întreg, iar la un selector TD sau TH adăugăm un chenar în jurul celulelor (Exemplul 2.6).
Exemplul 2.6. Adăugarea unui cadru dublu
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Mese Titlul 1 Titlul 2 Celula 3 Celula 4 Acest exemplu folosește un chenar negru dublu în jurul mesei în sine și un chenar solid albîn jurul fiecărei celule. Rezultatul exemplului este prezentat în Fig. 2.7.
Orez. 2.7. Chenar în jurul mesei și celulelor
Vă rugăm să rețineți că se formează linii duble acolo unde celulele se unesc. Ele sunt obținute din nou datorită acțiunii atributului cellspacing al etichetei
. Deși acest atribut nu apare nicăieri în codul exemplu, browserul îl folosește implicit. Dacă setați
, atunci obținem nu linii duble, ci simple, ci de grosime dublă. Pentru a modifica această caracteristică, utilizați proprietatea de stil border-collapse cu valoarea collapse , care este adăugată la selectorul TABLE (exemplul 2.7).
Exemplul 2.7. Crearea unui singur cadru
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Mese Titlul 1 Titlul 2 Celula 3 Celula 4 Acest exemplu creează o linie verde continuă între celule și o linie neagră în jurul mesei. Toate marginile din tabel au aceeași grosime. Rezultatul exemplului este prezentat în Fig. 2.8.
Orez. 2.8. Chenar în jurul mesei
Alinierea conținutului celulei
În mod implicit, textul dintr-o celulă de tabel este aliniat la stânga. Excepția de la această regulă este eticheta
, definește un antet care este centrat. Pentru a schimba metoda de aliniere, utilizați proprietatea stilului text-align (exemplul 2.8). Exemplul 2.8. Aliniați conținutul celulei pe orizontală
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Mese Titlul 1 Celula 1 Celula 2 Titlul 2 Celula 3 Celula 4 În acest exemplu, conținutul etichetei
este aliniat la stânga și conținutul etichetei - in centru. Rezultatul exemplului este prezentat mai jos (Figura 2.9). 
Orez. 2.9. Alinierea textului în celule
Alinierea verticală într-o celulă este întotdeauna centrată, dacă nu este menționat altfel. Acest lucru nu este întotdeauna convenabil, mai ales pentru tabelele al căror conținut de celule variază în înălțime. În acest caz, alinierea este setată la marginea superioară a celulei folosind proprietatea de aliniere verticală, așa cum se arată în Exemplul 2.9.
Exemplul 2.9. Aliniați conținutul celulei pe verticală
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Mese Titlul 1 Titlul 2 Celula 1 Celula 2 Acest exemplu setează înălțimea antetului
ca 40 de pixeli și textul este aliniat la marginea de jos. Rezultatul exemplului este prezentat în Fig. 2.10. 
Orez. 2.10. Alinierea textului în celule
Celulele goale
Browserele afișează diferit o celulă fără nimic în ea. „Nimic” în acest caz înseamnă că nu a fost adăugată nici o imagine, nici un text în interiorul celulei, iar spațiul nu este luat în considerare. Bineînțeles, aspectul celulelor diferă numai dacă în jurul lor este stabilit un chenar. Când folosiți o chenar invizibil, aspectul celulelor, indiferent dacă există sau nu ceva în ele, este același.
Browserele mai vechi nu afișau culoarea de fundal a celulelor de vizualizare goale
, așa că atunci când a fost necesar să lăsați o celulă fără conținut, dar să afișați culoarea de fundal, a fost adăugat un spațiu neseparat () în interiorul celulei. Spațiul nu este întotdeauna potrivit, mai ales atunci când trebuie să setați înălțimea celulei la 1-2 pixeli, motiv pentru care un singur pixel a devenit larg răspândit desen transparent. Într-adevăr, o astfel de imagine poate fi scalată la discreția ta, dar nu este afișată în niciun fel pe pagina web. Din fericire, era desenelor cu un singur pixel și a tot felul de distanțiere bazate pe acestea a trecut. Browserele funcționează destul de corect cu tabelele chiar și fără prezența conținutului celulelor.
Pentru a controla aspectul celulelor goale, utilizați proprietatea celule goale; când este setată să ascundă, chenarul și fundalul nu sunt afișate în celulele goale. Dacă toate celulele dintr-un rând sunt goale, atunci întregul rând este ascuns. Celula este considerată goală în următoarele cazuri:
- nu există simboluri deloc;
- celula conține doar o nouă linie, tab sau spațiu;
- vizibilitatea este setată la ascuns.
Plus spatiu de nerupere este perceput ca conținut vizibil, adică celula nu va mai fi goală (exemplul 2.10).
Exemplul 2.10. Celulele goale
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Folosind celule goale Leonardo 5 8 Rafael 11 Michelangelo 24 Donatello 13 Vizualizare tabel în browser Safari prezentată în fig. 2.11a. Același tabel din browserul IE7 este prezentat în Fig. 2.11b.
A. În browserul Safari, Firefox, Opera, IE8, IE9
b. În browserul IE7
Orez. 2.11. Vedere a unui tabel cu celule goale
Ultimele note - - Sectiune baza mesei;
- Etichetă asociată
