Scopul lecției: Familiarizarea cu proprietățile tabelelor și principiile de dispunere a tabelelor CSS
Să aruncăm o privire la proprietățile de bază ale tabelului CSS
frontieră
O proprietate este considerată într-una și include mai multe proprietăți în același timp:
- STIL BORDER
- LĂȚIMEA GRANIȚEI
- BORDER-COLOR
Există, de asemenea, o regulă colectivă:
table.collapse (border-colaps: colaps;) table.separate (border-colaps: separat;)
Rezultat:
latime si inaltime
(înălțimea și lățimea mesei)
Valori:
Exemplu:
aliniere text
(aliniere orizontala)
Valori:
- centru (centrat)
- stânga (aliniat la stânga)
- dreapta (aliniat la dreapta)
- justifica (latime)
vertical-aliniat
(aliniere verticală)
Valori:
- linie de bază (linie de bază)
- sub (ca subindex)
- super (ca superscript)
- sus (sus)
- mijloc (mijloc)
- jos (jos)
- % (din înălțimea spațierii)
Exemplu:
căptușeală
(căptușeală de masă)
culoare de fundal (fundal)
culoare (culoare text)
Aspect tabel CSS
Datorită numărului mare de proprietăți ale tabelelor și a variațiilor în designul acestora, tabelele perioadă lungă de timp au fost unele dintre standardele pentru aspectul paginilor web. Dacă faceți marginile tabelului invizibile, atunci puteți utiliza celulele sale individuale ca blocuri separate ale paginii: antet, meniu, subsol etc.
Dar acest lucru nu este în totalitate corect, deoarece fiecare etichetă are propriul scop, iar tabelele nu ar trebui să servească pentru aspectul paginii. Cu toate acestea, lipsa unei alternative i-a determinat pe designeri să utilizeze acest tip de metodă de aspect.
Acum există o altă modalitate - utilizarea straturilor, care a înlocuit treptat tabelele în acest tip de lucru cu o pagină web. Cu toate acestea, chiar și în zilele noastre, unii designeri folosesc cu succes aspectul tabelelor.
Aspect foaie de calcul cu două coloane
Una dintre cele mai frecvente metode de aspect este două coloane, adică pagina este împărțită în două părți.
Exemplu: setați cadrul principal al paginii în două coloane: prima - cu o dimensiune fixă, a doua - pentru restul zonei browserului. Executați sarcina utilizând stiluri CSS ()
Performanţă:
| </ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "dreapta"> 2</ td> </ tr> </ table> ... |
| 1 | 2 |
Rezultat:
Exemplu: setați un fundal diferit de celule (pentru a separa două coloane una de cealaltă) și setați distanța dintre coloane (separator)
Performanţă:
Să adăugăm noi proprietăți de stil:
/ * pentru celula stângă * / td # left (lățime: 200px; fundal: #ccc; chenar: 1px negru solid; / * marcați temporar marginile * /) / * pentru celula dreaptă * / td # dreapta (fundal: ;
Împreună:
| </ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "dreapta"> 2</ td> </ tr> </ table> |
| 1 | 2 |
O nouă celulă a fost adăugată pentru separator.
Rezultat:
Exemplu: face separator între coloanele tabelului folosind linie punctata marginile celulelor adiacente
Performanţă:
Să adăugăm noi proprietăți de margine pentru celule:
/ * pentru celula stângă * / td # left (lățime: 200px; fundal: #ccc; / * Culoare stânga fundal culoare * / / * nou * / border-right: 1px punctat # 000; / * Opțiuni margine punctat dreapta * / )
Împreună:
| </ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "dreapta"> 2</ td> </ tr> </ table> |
| 1 | 2 |
Rezultat:
Aspect foaie de calcul cu trei coloane
Există un concept al unui aspect fix sau „fluid”.
S-a rezolvat aspectul CSS
- Folosind aspect fix lățimea întregului tabel este setată în pixeli, și apoi, indiferent de rezoluția monitorului și a ferestrei browserului, tabelul va avea întotdeauna aceeași lățime.
- În acest caz lățimea coloanelor rămase ar trebui, de asemenea, să fie fixată.
- Este posibil să nu specificați lățimea unei celule, apoi va fi calculată automat pe baza dimensiunilor celulelor rămase și a întregului tabel.
Exemplu: creați un șablon de pagină cu trei coloane. Utilizați aspectul tabelului fix:
- coloana din stânga - 150 pixeli;
- coloana din mijloc - 400 pixeli;
Performanţă:
| </ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "dreapta"> 3</ td> </ tr> </ table> |
| 1 | 2 | 3 |
Rezultat:
Mașină de cauciuc
- Lățimea mesei atunci când se utilizează designul „cauciuc” setat în% din lățimea ferestrei browserului... Acea. când se schimbă fereastra browserului, tabelul este redimensionat, de asemenea.
- Lățimea tuturor celulelor poate fi instalat în procente.
- A doua opțiune este când lățimea unor celule este stabilit în procente, A unele în pixeli.
Important: Suma lățimilor tuturor coloanelor ar trebui să fie de 100%, indiferent de lățimea tabelului.
Exemplu:
- coloana din stânga - 20%;
- coloana din mijloc - 40%;
- coloana din dreapta - 40%;
Setați fundalul coloanelor și separați vizual coloanele cu o margine.
Performanţă:
| </ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "dreapta"> 3</ td> </ tr> </ table> |
| 1 | 2 | 3 |
Rezultat:
Luați în considerare a doua opțiune, când lățimea coloanei centrale este selectată automat de browser; un exemplu este imaginea: 
Exemplu: creați un șablon de pagină cu trei coloane. Utilizați un aspect de masă fluid:
- coloana din stânga - 150 pixeli;
- coloana din mijloc - 40%;
- coloana din dreapta - 200 pixeli;
Setați fundalul coloanelor și separați vizual coloanele cu o margine.
Performanţă:
| </ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "dreapta"> 3</ td> </ tr> </ table> |
| 1 | 2 | 3 |
Rezultat:
Rezultatul va fi aproximativ același, doar „întinderea” va avea loc datorită coloanei centrale.
Utilizarea unui tabel imbricat într-un aspect fluid
Dacă lățimea a două coloane este setată în procente și a treia în pixeli, nu veți putea trece cu un singur tabel. Deci, dacă lățimea întregului tabel este de 100%, prima coloană este de 200 pixeli, iar coloanele rămase sunt 20%, atunci un calcul simplu arată că dimensiunea primei coloane este de 60%. În acest caz, browserul nu va accepta valoarea specificată în pixeli, iar dimensiunea va fi setată în procente. 
- Tabelul original este creat cu două celule. Lățimea mesei este setată ca procent.
- Pentru celula stângă(prima coloană) lățimea este setată în pixeli.
- Lățimea dreaptă a celulei(bază pentru alte difuzoare) nu este specificat... Un al doilea tabel este inserat în interiorul acestei celule, care constă și din două celule.
- Lățimea celulelor tabelului imbricat este setată ca procent..
- Lățimea interioară a mesei trebuie setată la 100% astfel încât această masă să ocupe tot spațiul liber din masa exterioară.
- Lățimile coloanei centrale și din dreapta sunt calculate în raport cu lățimea celulei, nu tabelul exterior în ansamblu.
Exemplu: creați un șablon de pagină cu trei coloane. Utilizați aspectul fluid cu tabelul imbricat:
- coloana din stânga - 150 pixeli;
- coloana din mijloc - 60%;
- coloana din dreapta - 40%;
Setați fundalul coloanelor.
Performanţă:
Atributele etichetei celular și spațiul celulelor sunt necesare aici, astfel încât să nu existe „spațiu” între tabele. Deci, am studiat cel mai mult cu tine acțiuni simple care poate fi implementat cu margini de masă. Și acum masa arată mult mai plăcută din punct de vedere estetic. Cu toate acestea, umplerea celulelor se bazează direct pe limite. Puteți remedia cu ușurință acest lucru doar prin indentarea celulelor din tabelul HTML. Și apoi textul din cadru, în celulă, va fi mai ușor de citit. Pentru a face indentări într-o celulă, utilizați atributul căptușeala celulară pentru etichetă În acest caz, indentările sunt setate folosind proprietatea căptușeală... Cu ajutorul său, nu va fi dificil să se indenteze acolo unde este necesar, adică sus, dreapta, jos sau stânga, folosind, respectiv, una dintre aceste proprietăți: blat de umplutură, umplutură-dreapta, umplutură de fundși umplutură-stânga. Puteți seta câți pixeli trebuie indentați. Iată un exemplu în care va fi marja de jos 20
pixeli, iar restul vor fi 10
... Astfel de CSS-codul va arăta astfel: Td (umplutură: 10 px; fundul de umplutură: 20 px;) Și codul complet de stiluri în această etapă: Tabel (chenar: albastru 1px solid; bordură-colaps: colaps;) td (chenar: albastru solid 1 px; umplutură: 10 px; fund de umplutură: 20 px;) Rezultatul în browser: De obicei, sarcinile asociate creării tabelelor pot fi rezolvate folosind etichete, atribute și proprietăți care vă permit să creați margini, indentări în celule și, de asemenea, să setați fundalul de culoare al celulelor în sine. Indentările din tabele nu sunt numai în interiorul celulelor. De asemenea, pot fi prezenți între celule. Există două moduri de a indenta între celule: Trebuie subliniat faptul că spațiere la margine este scris pentru tabel ca întreg, în timp ce proprietatea căptușeală prescrie direct celulele. Să aruncăm o privire la un exemplu: Tabel (chenar: albastru solid 1 px; bordură colapsată: separată; spațiu margine: 5 px;) td (chenar: albastru solid 1 px; umplutură: 10 px; fundul de umplutură: 20 px;) Și rezultatul rezultat: Să stipulăm imediat că nu trebuie să încercați să faceți astfel de liniuțe folosind border-colaps: colaps... Într-adevăr, atunci când utilizați această opțiune, celulele se „lipesc” una de cealaltă. Și pentru a le menține separate unele de altele, ar trebui să le folosiți border-colaps: separat... Este important să înțelegem că această valoare este implicită. Și este folosit numai pentru a arăta clar cum se rezolvă această problemă. Dacă ștergem această linie, atunci va fi salvat rezultatul sub formă de celule situate separat unul de celălalt. CSS vă permite să setați nu numai stilul chenarului tabelului, ci și stilul chenarelor celulelor individuale. Deoarece fiecare celulă are propriile margini, granița dintre celulele adiacente este dublată. Dar este posibil să combinați marginile celulelor vecine într-una singură. Pentru aceasta există o proprietate de colapsare a frontierelor. Preia valorile: border-colaps: separat - fiecare celulă are propriul său border (implicit) border-collapse: colaps - frontiera generală border-collapse: mostenesc - valoarea este preluată din element părinte De exemplu, să creăm un tabel și să setăm un cadru pentru celulele tuturor tabelelor care vor fi pe pagină. În primul rând, să nu schimbăm nimic pentru a vedea cum va arăta tabelul: Stil: 1 După adăugarea de cadre în celulele de masă, s-a observat că conținutul celulelor era prea aproape de margini. Puteți utiliza proprietatea de umplere pentru a adăuga spațiu alb între marginile celulelor și conținutul acestora: Th, td (padding: 7px;) Încercați-l " Mărimea mesei depinde de conținutul acesteia, dar de multe ori apar situații când masa este prea îngustă și devine necesară întinderea acesteia. Lățimea și înălțimea tabelului pot fi modificate folosind proprietățile de lățime și înălțime, setând dimensiunile dorite fie la masă, fie la celule: Tabel (lățime: 70%;) al treilea (înălțime: 50 px;) Încercați-l " În mod implicit, textul din celulele antetului tabelului este aliniat la centru, iar textul din celulele normale este aliniat la stânga, folosind proprietatea de aliniere a textului puteți controla alinierea orizontală a textului. Proprietatea de aliniere verticală CSS vă permite să controlați alinierea verticală a conținutului text. În mod implicit, textul este aliniat vertical la centrul celulelor. Alinierea verticală poate fi anulată cu una dintre valorile proprietății de aliniere verticală: Când scanați tabele mari care conțin multe rânduri cu o cantitate mare informații, poate fi dificil să țineți evidența datelor care aparțin unui anumit rând. Pentru a ajuta utilizatorii să navigheze, puteți utiliza alternativ două culori de fundal diferite. Pentru a crea efectul descris, puteți utiliza selectorul de clasă, adăugându-l la fiecare al doilea rând al tabelului:
Adăugarea unui atribut de clasă la fiecare a doua linie este o sarcină plictisitoare. Pseudo-clasa: nth-child a fost adăugată în CSS3 pentru a rezolva această problemă mod alternativ... Efectul de alternanță poate fi acum realizat exclusiv folosind CSS fără a fi nevoie să modificați marcajul HTML al documentului. Cu pseudo-clasa: nth-child este posibil să selectați toate rândurile impare sau pare ale unui tabel folosind unul dintre Cuvinte cheie: par (par) sau impar (impar): Tr: nth-child (impar) (fundal-culoare: # EAF2D3;) Încercați-l " O altă modalitate de a îmbunătăți lizibilitatea datelor tabulare este schimbarea culoare de fundal linii atunci când treceți cu mouse-ul peste el. Acest lucru va ajuta la evidențierea conținutului dorit al tabelului și la îmbunătățirea percepției vizuale a datelor. Implementarea acestui efect este foarte simplă, pentru aceasta trebuie să adăugați pseudo-clasa: hover la selectorul rândului tabelului și să setați culoarea de fundal dorită: Tr: hover (fundal-culoare: # E0E0FF;) Încercați-l " Alinierea unui tabel HTML la centru este posibilă numai dacă lățimea tabelului este mai mică decât lățimea elementului său părinte. Pentru a alinia tabelul în centru, trebuie să utilizați proprietatea marginii, setând-o cu cel puțin două valori: prima valoare va fi responsabilă pentru marginea exterioară a tabelului în partea de sus și de jos, iar a doua pentru alinierea centrală automată: Tabel (margine: 10 px automat;) Încercați " Dacă aveți nevoie de margini diferite în partea de sus și de jos a tabelului, puteți seta proprietatea marginii la trei valori: prima va fi responsabilă pentru marja superioară, a doua pentru alinierea orizontală și a treia pentru marja inferioară: Tabel (marjă: 10 px automată 30 px;) Am luat în considerare multe metode de stilizare a elementelor de pe pagină, cum ar fi informații despre text, linkuri, imagini, titluri, dar toate acestea nu sunt încă suficiente. În articolele mele, folosesc adesea elemente HTML, cum ar fi tabelele, deoarece în majoritatea cazurilor sunt ajuta la sistematizarea Informații importanteși face mai ușor de servit. În acest articol, vă voi prezenta complexitățile stilului tabelelor HTML și veți afla noi proprietăți CSS concepute pentru a atinge aceste obiective. Hypertext Markup Language HTML ne-a furnizat un numar mare de oportunități de a lega stilurile CSS de zece etichete unice concepute pentru lucrul cu tabele, vă sugerez să le repetați înainte de a studia în continuare: În acest exemplu, noi: Rezultatul exemplului nostru: După exemplul de mai sus, este posibil să fi observat că avem un decalaj între toate celulele din tabel. Să vedem cum să eliminăm decalajul dintre celulele de masă sau să îl mărim. Pentru a seta distanța dintre marginile celulelor adiacente, trebuie să utilizați proprietatea CSS - border-spacing. În acest exemplu, noi: Vă atrag atenția asupra faptului că dacă este specificată o singură valoare a lungimii în proprietatea de spațiere a chenarului, aceasta indică distanța, atât pe orizontală, cât și pe verticală, și dacă sunt specificate două valori de lungime, atunci prima determină distanța orizontală , iar a doua verticală. Distanța dintre marginile celulelor adiacente poate fi specificată în unități CSS (px, cm, em etc.). Valorile negative nu sunt permise. Rezultatul exemplului nostru: Poti spune: - deci, am eliminat spațiul dintre celule folosind proprietatea de spațiere a chenarelor cu o valoare 0, dar de ce avem acum marginile celulelor care se intersectează? Bordurile duble se formează datorită faptului că marginea inferioară a unei celule este adăugată la marginea superioară a celulei care se află sub aceasta, o situație similară apare pe laturile celulelor și acest lucru este logic din punctul de vedere al afișării tabelul, dar din fericire există o modalitate de a spune browserului că suntem, nu vrem să vedem un comportament atât de obraznic al marginilor celulare. Pentru a face acest lucru, trebuie să utilizați proprietatea CSS de restrângere a chenarului. În mod ciudat, folosirea proprietății border-collapse cu valoarea de colaps este cel mai bun mod cum puteți elimina decalajul dintre celule și nu obțineți margini duble între ele. Luați în considerare o comparație a comportamentului frontierei atunci când utilizați proprietatea de spațiere a frontierelor cu o valoare 0 și proprietatea de colapsare a frontierelor cu o valoare de colaps: În acest exemplu, noi: Rezultatul exemplului nostru: Folosind CSS puteți seta dacă să fie afișate sau nu margini și fundaluri pentru celulele goale dintr-un tabel. Proprietatea de celule goale este responsabilă pentru acest comportament, care implicit, așa cum ați observat din exemplele anterioare, afișează celule goale. Să trecem la un exemplu: Pentru a înțelege cum funcționează proprietatea de celule goale din acest exemplu este foarte simplu, dacă este setat să se ascundă, atunci celulele goale și fundalul din ele vor fi ascunse, dacă sunt setate să arate (implicit), atunci vor fi afișate. Să ne uităm la o altă proprietate simplă pentru tabelele de styling - caption-side, care setează poziția subtitrării tabelului (deasupra sau sub tabel). În mod implicit, proprietatea din partea subtitrării este setată în partea de sus, ceea ce plasează subtitrarea deasupra tabelului. Pentru a plasa titlul sub tabel, trebuie să utilizați proprietatea cu valoarea inferioară. Să vedem un exemplu de utilizare a acestei proprietăți: În acest exemplu, am creat două clase care controlează poziția antetului tabelului. Clasa întâi ( .topCaption) pune titlul tabelului deasupra acestuia, l-am aplicat la primul tabel, iar clasa a doua ( .bottomCaption) plasează titlul tabelului sub el, l-am aplicat celui de-al doilea tabel. Clasă .topCaption are o proprietate implicită a subtitrării și a fost creat în scop demonstrativ. Rezultatul exemplului nostru: În majoritatea cazurilor, atunci când lucrați cu tabele, va trebui să ajustați alinierea conținutului în antet și celule de date. Proprietatea text-align este utilizată pentru alinierea orizontală similară cu orice informație text. Am discutat despre utilizarea acestei proprietăți pentru text mai devreme în articolul „”. Pentru a seta alinierea pentru conținutul din celule, trebuie să utilizați cuvinte cheie speciale cu proprietatea text-align. Să luăm în considerare aplicarea cuvintelor cheie ale acestei proprietăți în exemplul următor. În acest exemplu, am creat patru clase, care a setat diferite aliniere orizontale în celule și le-a aplicat în rândurile din tabel. Valoarea din celulă se potrivește cu valoarea proprietății text-align Rezultatul exemplului nostru: În plus față de alinierea orizontală, puteți defini și alinierea verticală în celulele tabelului utilizând proprietatea de aliniere verticală. Vă rugăm să rețineți că atunci când lucrați cu celule de masă, sunt utilizate numai următoarele valori * ale acestei proprietăți: *
- Valorile sub, super, text-top, text-jos, lungime și% aplicate la celula tabelului se vor comporta ca și cum ar folosi valoarea de bază. Să vedem un exemplu de utilizare: În acest exemplu, am creat patru clase, care a setat diferite alinieri verticale în celule și le-a aplicat în rândurile de tabel. Valoarea din celulă se potrivește cu valoarea proprietății de aliniere verticală care a fost aplicată acelui rând. CSS folosește implicit algoritmul de aspect al tabelelor din browser. În acest caz lățimea coloanei este setată de cel mai larg conținut neîntrerupt al celulei. Acest algoritm poate fi lent în unele cazuri, deoarece browserul trebuie să citească tot conținutul din tabel înainte de a stabili aspectul final. Pentru a schimba tipul de aspect al tabelului de către browser cu automat pe fix, trebuie să utilizați proprietatea CSS de dispunere a tabelelor setată la fix. În acest caz, plasarea orizontală depinde doar de din lățimea tabelului și lățimea coloanelor și nu din conținutul celulelor. Browserul începe să afișeze tabelul imediat după primirea primului rând. În consecință, algoritmul fix vă permite să creați aspectul unui astfel de tabel mai repede decât utilizarea versiunii automate. Când lucrați cu tabele mari, puteți utiliza un algoritm fix pentru a îmbunătăți performanța. Să vedem aplicația acestei proprietăți cu următorul exemplu: În acest exemplu, noi: Am atins deja parțial metodele de stilare a rândurilor și coloanelor tabelului din articolul „”. În acest articol, am analizat utilizarea unei pseudo-clase de grup care vă permite să alternați stilurile de rând în tabele folosind valori chiar (sincer) și ciudat (ciudat), sau prin elementare formula matematică. Să revedem tehnicile anterioare și să explorăm noi modalități de a stiliza rândurile și coloanele din tabele. Să trecem la exemple. În acest exemplu, noi: Rezultatul exemplului nostru: Să trecem la următorul exemplu, în care vom analiza opțiunile pentru coafarea rândurilor tabelelor. În acest exemplu, noi: Rezultatul exemplului nostru: Orez. 153 Exemplu de stilare a rândurilor în tabele Următorul exemplu arată cum se aplică rotunjirea colțurilor la celulele de masă (proprietate). În acest exemplu, noi: Rezultatul exemplului nostru: Următorul exemplu atinge utilizarea elementelor HTML În acest exemplu, noi: Rezultatul exemplului nostru: Ei bine, și ultimul exemplu, care este destul de dificil de înțeles și necesită cunoștințe avansate în CSS, deoarece atinge subiecte viitoare planificate pentru studiu detaliat în cadrul acestui curs. În exemplul anterior, ne-am dat seama că prin Element HTML În acest exemplu, noi: Rezultatul exemplului nostru: Dacă în această etapă a studiului nu înțelegeți procesul de poziționare a elementelor, atunci nu vă descurajați, acesta este un subiect greu de înțeles, pe care, de asemenea, nu l-am luat în considerare, dar cu siguranță îl vom lua în considerare în următorul articol al tutorial „Elementele de poziționare în CSS”. Finalizați activitatea practică înainte de a trece la următorul subiect: Dacă întâmpinați dificultăți la finalizarea practicii, puteți deschide oricând exemplul într-o fereastră separată și puteți inspecta pagina pentru a vedea ce CSS a fost utilizat. 2016-2020 Denis Bolshakov, puteți trimite comentariile și sugestiile dvs. despre activitatea site-ului la site-ul [email protected] |
