În multe cazuri, am găsit soluții mai simple, utilizând proprietăți CSS ignorate frecvent pentru afișarea tabelelor. Aceste proprietăți CSS au un suport bun în toate browserele importante (cu excepția IE6 și 7) și vă pot scuti elegant de durerile de cap atunci când se ocupă de mai multe probleme mari, precum și unele minore, atunci când creați layout layouts.
În cazul în care nu sunteți 100% familiarizat cu această tehnică, voi spune că modificând valoarea proprietății de afișare a blocurilor DIV, le puteți face să se comporte ca tabele sau elemente de tabel.
Stai puțin ... Ce? Tabele pentru crearea marcajului? E bine?
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
În schimb, folosim etichete HTML (de exemplu, DIV, SECTION, HEADER, etc.) și pur și simplu împrumutați câteva funcții tabulare utile în CSS. Acesta este exact motivul pentru care au fost inventate stilurile CSS, deci nu credeți că acest lucru este un fel de hack sau "crutch". Nu e așa.
Folosind 'display: cell-cell'
În exemplul de mai jos, puteți modifica valoarea proprietății de afișare (de la bloc la cel de tabel) în trei blocuri DIV colorate făcând clic pe butonul de sus:
Puteți vedea modul în care puteți aranja ușor blocurile DIV pe orizontală, fără a aplica floatul de proprietăți și, de asemenea, veți avea acces la anumite reguli de comportament (de obicei pentru tabele) (de exemplu, proprietatea vertical align-alignment vertical).
Această tehnică poate fi foarte utilă pentru rezolvarea multor probleme care sunt dificil de rezolvat în alte moduri.
Am ales trei cazuri simple, atunci când proprietățile de cartografiere ale cartografierii pot fi cu adevărat valoroase. Să ne uităm la ele:
Un ghid cu adevărat detaliat al tabelelor din CSS poate fi găsit pe site-ul CSS Tricks.
Cazul 1. Coloane de înălțime egală
Cred că acesta este unul dintre cazurile cele mai frecvente la care trebuia să mă confrunt: există mai multe blocuri "plutitoare" cu conținut necunoscut și aveți nevoie de toate blocurile pentru a avea aceeași înălțime. Știu că flexbox-ul poate rezolva cu ușurință această problemă, dar regulile de masă o pot face.
Doar asociați proprietățile afișajului: tabel (sau rând de tabel) la container și afișare: proprietatea celulei table pentru blocurile interne. Aveți grijă să eliminați proprietatea float (altfel valoarea celulei de tabel nu va funcționa).
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cazul 2. O versiune simplă "de modă veche" a marcajului
Există un exemplu învechit de marcare, dar cred că este posibil să vă confruntați cu ea, așa cum mi sa întâmplat recent.
Cu câteva luni în urmă am primit un aspect grafic, care era foarte asemănător modelului de exemplu. Această cerință a fost compatibilă cu IE8, deci am decis că este mai bine să folosiți regulile CSS pentru a afișa tabele:
Cazul 3. Aspectul layout-ului și managementul conținutului
Exemplul anterior ne conduce la un nou subiect: Este posibil să creați un aspect receptiv folosind reguli CSS pentru afișarea tabelelor?
Nu numai că este posibil, dar puteți efectua și anumite activități pentru a gestiona conținutul. Am văzut deja cum schimbarea valorii proprietății de afișare (de la bloc la cel de tabelă) în două blocuri div poate schimba locația (de la verticală la orizontală).
Aici puteți adăuga momentul în care elementul pentru care proprietatea de afișare este setat cu tabela de valori-header-grup este mutat în partea superioară a tabelului. Prin același principiu, datorită valorii grupului tabel-subsol, toate elementele sunt mutate în partea de jos a mesei, etc. Acest lucru poate fi surprinzător de util atunci când doriți să reorganizați elementele într-un aspect receptiv.
În demonstrația de mai jos, elementul antet se schimbă cu elementul nav când fereastra este redimensionată, pur și simplu schimbând valoarea proprietății de afișare (grup-header-grup).
În mod similar, se comportă elementele de subsol și # banner2. Iată un plan de planificare schematică: în partea stângă - afișajul implicit, versiunea mobilă, pe partea dreaptă - versiunea pentru desktop-uri:
Iată exemplul demo "live":
concluzie
Proprietățile CSS pentru afișarea tabelelor reprezintă un instrument subevaluat și util pentru rezolvarea problemelor mari și mici cu aspectul layout-urilor. Și, deși personal nu le-aș folosi pentru a construi o marcare complexă, cu siguranță pot rezolva multe probleme dificile cu privire la anumite aspecte ale construcției de marcare.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Trimiteți-le prietenilor: