Lățimea implicită a tabelului este stabilit de către browser-ul pe cont propriu, în funcție de volumul de date tabelare-l. Dacă textul în celulele multora, atunci masa va ocupa întreaga lățime disponibilă la ea, și dacă este mic, lățimea de masă este redusă în mod automat. Dacă există mai multe tabele pe pagina de lățime diferită, uneori, arata neglijent. Deci, este mai bine să se precizeze în mod explicit lățimea de masă ca procent, pixeli, em, sau orice alte unități CSS, așa cum se arată în exemplul 1.
Exemplul 1. Lățimea mesei ca procent
În acest exemplu, lățimea de 100% se aplică la toate tabelele. Din nou, clasele de ajutor setați lățimea pentru tabelele selectate ciclism de clasă create anterior. Pentru a specifica o lățime de masă de 200 de pixeli pentru a fi adăugate la elementul
clasa-TBL mici.
alinierea tabelelor
Inițial, orice masă este situat pe marginea din stânga a ferestrei de browser. Puteți să-l aliniați în centru, în cazul în care masa nu ocupă întreaga zonă disponibilă, cu alte cuvinte, mai puțin de 100%. Pentru a face acest lucru, stilul de masă ar trebui să adăugați padding prin proprietatea de a marjei auto. așa cum este prezentat în Exemplul 2.
Exemplul 2. Masa de aliniere folosind marja
În acest exemplu, toate tabelele de pe pagina este setată la alinierea la centru.
Culoarea de fundal a tuturor celulelor, în același timp, masa este stabilită prin fundal de proprietate. care se aplică tabelul selector. Trebuie amintit cu privire la utilizarea de stiluri, în special moștenirea proprietăților elementelor. În cazul în care, simultan cu tabelul culoarea TD selectorul sau lea. și apoi va fi setat ca fundal (exemplul 3).
Exemplul 3: Culoare fundal
Rezultatul acestui exemplu este prezentată în Fig. 1.
Fig. 1. Schimbarea culorii de fundal
Dacă avem nevoie pentru a face o zebră - așa-numitele rânduri alternante de culori diferite, ar trebui să utilizați pseudo: nth-copil. adăugându-l la selectorul tr. Zebra să se răspândească numai pe corpul mesei, mai degrabă decât titlul, pentru a le separa unul de altul prin intermediul unor elemente și
(Exemplul 4).
Exemplul 4: Crearea unei zebră
Rezultatul acestui exemplu este prezentată în Fig. 2.
Înțeles chiar și la cadran: stil nth-copil se aplică tuturor liniilor chiar și setează culoarea de fundal. Este de asemenea posibil să-l schimbe pe ciudat. apoi gri vor fi alocate linie ciudat.
În mod similar, linia de culoare nu este alocată, iar o coloană trebuie să fie utilizate pentru acest selector tbody td: nth-copil (chiar).
Câmp în interiorul celulei
Câmpul este distanța dintre limita celulei și conținutul său. Text fără margini în tabelul „Sticks“ la cadru, înrăutățind astfel percepția sa, adăugarea câmpurilor poate îmbunătăți lizibilitatea textului. În acest scop, se aplică padding proprietate stil. care operează cu un selector sau TD-lea. așa cum este arătat mai sus în exemplele 3 și 4. De obicei, indică o singură valoare, în timp ce acesta stabilește spațiul gol din jurul conținutul celulei la o dată din toate părțile. Cele două valori sunt scrise, atunci când este necesar să se stabilească diferite domenii pe verticală (prima valoare) și pe orizontală (a doua valoare).
Distanța dintre celulele
Între celulele există o mică distanță de gol, care nu este vizibilă până când celulele nu pentru a stabili o culoare de frontieră sau de fundal. Inițial, această distanță este 2px, și poate fi modificată folosind proprietatea de frontieră-spațierea. adăugându-l la tabelul selector (exemplul 5).
Exemplul 5. Utilizarea border-spațiere
Prin adăugarea acestui stil la orice masă obținem rezultatele sunt prezentate în Fig. 3.
Fig. 3. Vezi tabelul cu distanța dintre celule
Dacă tabelul se adaugă la setul de proprietate de frontieră-colaps să se prăbușească. granița spațiere este ignorată, deoarece distanța dintre celulele nu mai.
Metes și limite
Pentru a separa în mod clar conținutul unei celule de la o alta, adăugat la granița celulelor. Pentru stabilirea lor respectă proprietatea de frontieră stilistice. care se aplică elementelor (
sau | ). Cu toate acestea, aici ne așteptăm capcanele. Deoarece rama este creat pentru fiecare celulă, punctele de contact dintre celulele la limită obținute cu grosime dublă. Pentru a elimina caracteristicile de mai sus, există mai multe moduri. Cea mai simplă - utilizează proprietatea de frontieră-colaps la prăbușirea valorii. Sarcina sa este de a monitoriza linia de contact, și în loc de marginea dublă pentru a reprezenta o singură. Această proprietate este suficient pentru a adăuga la masa de selectare. și atunci ei vor face totul singur (exemplul 6).
Exemplul 6. Proprietățile de aplicare a frontierei colaps la crearea cadrului de masă
Diferența dintre granițele proprietăților tabelului adăugând border-colaps. și fără ea, este prezentată în Fig. 4.
și - proprietate nu este setat
b - proprietate este setată
Fig. 4. Vezi tabelul folosind border-colaps
Fig. 4a prezintă cadrul tabelului care este utilizat în mod implicit. Rețineți că în tabel toate liniile au de doua ori grosimea. Adăugarea unui frontieră colaps elimină această caracteristică, iar grosimea liniilor devine aceeași (Fig. 4b).
Linia nu face neapărat pentru toate celulele părți, conform proiectului, acestea pot fi separate de un rând sau o coloană de alta. Pentru a face acest lucru, vom folosi proprietățile de frontieră-jos. border-stânga și altele asemenea. Se aplică frontiera elementelor | . .
și Nu putem, prin urmare, adăugați-le la masa de selectare și TD (exemplul 7).
Exemplul 7. Liniile dintre liniile
Rezultatul acestui exemplu este prezentată în Fig. 5.
Fig. 5. Tabel cu linii orizontale
Text aliniere in celule
În mod implicit, text într-o celulă de tabel este aliniat înălțime stânga și centru. O excepție este elementul
. definește o celulă antet în care are loc alinierea la mijloc. Pentru a schimba metoda de aliniere stilul folosit proprietatea text-align (Exemplul 8).
Exemplul 8 Alinierea continutului celulelor orizontal
În acest exemplu, conținutul | aliniat la stânga, iar conținutul | - în centru. Exemplul rezultate arătate mai jos (Fig. 6).
Fig. 6. Aliniați textul din celulele
Alinierea pe verticală a celulei are loc întotdeauna în centrul său, în cazul în care nu se specifică altfel. Nu este întotdeauna convenabil, mai ales pentru tabele în care conținutul celulei diferă în înălțime. În acest caz, alinierea amplasat la marginea superioară a celulei cu o proprietate verticală se aliniază cu valoarea superioară. așa cum se arată în exemplul 9.
Exemplul 9. Alinierea conținutului celulelor vertical
În acest exemplu, alinierea textului se produce de-a lungul marginii superioare. Rezultatele Exemple sunt prezentate în Fig. 7.
Fig. 7. Text aliniere in celule
articole similare
|
