| .
Acum, masa și celulele au un cadru, și, în același timp, fiecare celulă și masa are propriul cadru. Ca rezultat, între cadrele au apărut spațiu gol, pentru a controla dimensiunea acestui spațiu permite proprietate spațiere de frontieră. care este dat în întregime întregul tabel. Cu alte cuvinte, nu puteți controla golurile dintre celule diferite în mod individual.
Chiar dacă eliminați spațiile dintre celulele folosind valoarea 0 proprietăți border-spațierea, cadrul celulei va intra în contact, dublând unul cu celălalt. Pentru a îmbina cadrele de celule utilizate de proprietate de frontieră-colaps. Se poate lua două valori:
- separat: este valoarea implicită. Celulele sunt expuse la o mică distanță unul față de celălalt, fiecare celulă are propria frontieră.
- colaps: conectează cadre adiacente una, toate spatiile dintre celule si intre celule si cadrul tabelului sunt ignorate.
încercați acum »
dimensiune tabel
După adăugarea de cadre pentru celulele de masă, a devenit evident faptul că conținutul celulelor sunt situate prea aproape de margini. Pentru a adăuga un spațiu între marginile celulelor și conținutul lor, utilizați umplutură de proprietate:
Dimensiunea mesei depinde de conținutul său, dar sunt ocazii când masa este prea îngustă și este necesar să-l întindă. Lățimea și înălțimea mesei poate fi modificată folosind lățimea și înălțimea. solicitând mărimea potrivită sau tabel în sine sau celule:
alinierea textului
Textul implicit în celulele din tabel antet este aliniat la centru, iar în celulele normale este aliniat la stânga, folosind proprietatea text aliniere poate fi controlată prin alinierea textului orizontal.
CSS proprietate vertical-align vă permite să controlați alinierea textului conținutului vertical. În mod implicit textul este aliniat vertical în centrul celulei. Alinierea verticală poate fi înlocuită prin utilizarea uneia din valorile de proprietate verticale Alinierii:
- sus: textul este aliniat la limita superioară a celulei
- mijloc: aliniază textul din mijloc (implicit)
- jos: textul este aliniat la limita inferioară a celulei
încercați acum »
rânduri alternante tabel de culoare de fundal
Adăugați atributul de clasă pentru fiecare al doilea rând este destul de o sarcină plictisitoare. În CSS3 a fost adăugat la pseudo-clasa: nth-copil. permițând să rezolve această problemă o rută alternativă. Acum efect intercalarea poate fi realizat doar cu CSS, fără a fi nevoie să se schimbe markup document HTML. Cu pseudo-clasa: nth-copil poate selecta toate rândurile impare sau chiar din tabel utilizând unul dintre cuvintele cheie: chiar (chiar) sau impar (nui adevărat):
Linii Schimbarea de fond Hover
Un alt mod de a îmbunătăți lizibilitatea datelor din tabelă este de a schimba culoarea de fundal a liniei atunci când treceți peste el cu cursorul mouse-ului. Acest lucru va ajuta pentru a evidenția conținutul dorit al tabelului și mări cantitatea de date de percepție vizuală.
Pentru a pune în aplicare acest efect este foarte simplu, trebuie doar să adăugați un pseudo-clasă: hover la rândul selectorului de tabel și setați culoarea de fundal dorită:
articole similare
|