Tot ce știți despre - css - nu este adevărat

Tot ce știți despre CSS nu este adevărat.

După lansare, IE8 va suporta mulți parametri noi pentru atributul de afișare CSS, inclusiv parametrii aferenți tabelelor: tabelul. table-row și table-cell - și acesta este ultimul browser major cu suportul lor. Acest eveniment va marca sfârșitul metodelor complexe de marcare CSS și va marca ultimul cui în sicriu folosind tabele HTML pentru aspect. Ca rezultat, crearea de machete pentru o vizualizare de tabel va fi mai rapidă și mai ușoară.

Aplicarea atributelor tabulare elementelor paginii web determină elemente să emuleze proprietățile imaginii folosind echivalentele lor de tabel. În acest articol, vă voi arăta cum va avea un impact mare asupra modului de utilizare a CSS pentru marcarea paginilor Web.

Tabelele CSS rezolvă toate problemele care apar atunci când se utilizează un sistem absolut de coordonate sau float pentru a crea marcaj multi-linie în browserele moderne. Setarea parametrului de tabel la atributul de afișare vă va permite să afișați elementele ca și cum ar fi elemente de tabelă. Principalul avantaj al tabelării CSS este abilitatea de a defini cu ușurință marginile celulei, permițându-ne să adăugăm fundaluri și chestii pentru aceasta fără problemele semantice de separare a elementelor non-tabel, ca în tabela HTML a documentului.

Codul HTML determină ordinea ieșirii datelor. Primul este coloana nav. apoi extras. ultima este conținutul.

De asemenea, trebuie să scriem codul CSS necesar:

Layout-ul tabelului pe care tocmai l-am creat va fi afișat corect ca în IE8. și în Firefox, Safari și Opera.

Tot ce știți despre - css - nu este adevărat

Avem un marcaj de trei coloane de înălțime egală fără a folosi tehnici speciale, cum ar fi coloane false cu imagini de fundal, probleme cu plasarea sau nevoia de a curăța plutitoare!

Cum funcționează?

Atributul de afișare vă permite să specificați un număr de parametri de tabel pentru a afișa elemente ca și cum ar fi elemente de tabelă. Iată opțiunile de afișare disponibile:

tabelul determină elementul să se comporte ca element de tabel;
rândul de tabel determină elementul să se comporte ca un element al unui rând de tabel;
table-cell determină elementul să se comporte ca element al unei celule de tabel;
table-row-group determină elementul să se comporte ca element al grupului de rânduri de tabel;
table-header-group determină elementul să se comporte ca un element al grupului antet al tabelului;
table-footer-grup provoacă elementul să se comporte ca un element al grupului subsol;
table-caption determină elementul să se comporte ca un element de antet al tabelului;
tabela-coloană determină elementul să se comporte ca element al unei coloane de tabel;
tabela-grup-coloană determină elementul să se comporte ca element al grupului de coloane al tabelului.

Așteaptă, nu sunt mese de marcare - este corect?

Să presupunem că nu sunteți destul de de acord cu exemplul pe care tocmai am avut-o. În definitiv, apărătorii standardelor de web nu au insistat de ani de zile că nu ar trebui să utilizați tabele pentru marcare?

Elementul de tabel HTML este o structură semantică: descrie ce reprezintă datele. Prin urmare, trebuie să utilizați tabelul. Numai dacă datele pe care le postați sunt tabulare, de exemplu, informații financiare. Acesta este, de obicei, plasat pe calculator printr-o foaie de calcul, deci ar trebui să îl definiți ca o tabelă în HTML.

Pe de altă parte, parametrul tabel al afișării atributului. arată doar cum ar trebui să arate ceva în browser și nu are sens semantic!

Folosind elementul de tabel pentru markup-ul tău îi spune agentului utilizator: "Aceasta este o dată tabulară." Și folosirea unui grup de divuri îi cere să le selecteze vizual într-un mod specific, dacă este posibil.

Desigur, nu ar trebui să folosim afișarea: tabel; într-o grămadă de elemente div, când avem date cu adevărat tabulare. Exemplul nostru simplu descris mai sus face ca marcajul nostru să arate ca și când avem o singură linie cu trei celule, nu are nevoie de prea multă imaginație pentru a realiza potențialul acestei tehnici pentru crearea ușoară a tipurilor complexe de marcaje.

Elemente de masă anonime

Tabelele CSS aderă la regulile obișnuite de marcare a tabelei, care deschid o proprietate foarte puternică a schemelor de tabele CSS: elementele de tabelă sărituri sunt create anonim de către browser-ul însuși. Specificație CSS 2.1 prevede:

Alte documente HTML decât HTML nu pot conține toate elementele modelului CSS 2.1. În aceste cazuri, elementele "lipsă" trebuie create pentru ca modelul de tabel să funcționeze. Orice element al tabelului va genera automat în jurul acestuia obiectele de tabel anonime necesare, constând din cel puțin trei obiecte imbricate care corespund elementelor "table" / "inline-table", "row-table" și "table-cell".

Aceasta înseamnă că dacă vom folosi afișarea: table-cell; fără a plasa mai întâi celula într-un loc legat de afișare: rândul rândului; atunci linia va fi implicită - browserul se va comporta ca și când linia declarată va exista.

Să folosim un exemplu simplu pentru a explica această tehnică: structura cu trei celule prezentată mai jos. Vom analiza trei exemple diferite de cod HTML care conduc la același marcaj vizual.

Mai întâi, un exemplu de cod care poate fi utilizat pentru a crea o marcare cu trei celule:

Setul de elemente div imbrăcate nu arată foarte special, dar în curând o vom schimba. CSS este, de asemenea, foarte simplu:

Acest CSS se referă la un element cu clasa "container" pentru a afișa: table; element cu clasa "rând" pentru a afișa: rândul de masă; și un element cu clasa "celulă" - pentru a afișa: table-cell; cu specificarea limitei, înălțimii și lățimii sale.

Marcajul HTML de mai sus creează în mod explicit elemente pentru o tabelă dintr-un șir de trei celule, folosind toate clasele CSS pe care le-am creat. Cu toate acestea, putem reduce codul eliminând elementul div string astfel:

În ciuda faptului că elementul care reprezintă tabela lipsește în acest marcaj, acesta va fi creat de browser ca element anonim. Putem reduce în continuare codul:

Într-o astfel de marcare, elementele care descriu tabela și linia acesteia sunt omise, ambele fiind create de browser ca elemente anonime. Chiar și cu elementele lipsă din marcare, rezultatul final este același.

Regulile pentru crearea elementelor de masă anonime

Aceste elemente anonime nu sunt create de magie și nu vor apărea automat pentru lipsa codului dvs. HTML. Pentru a profita pe deplin de elementele de masă anonime, vă recomandăm să vă familiarizați cu regulile de creare a acestora. Dacă marcajul cere un element presupus, browserul creează o celulă anonimă și scrie atributul său CSS pentru a afișa atributul una dintre valorile tabelului. tabel rânduri. sau celula de masă. în funcție de context.

Dacă aveți un element definit ca afișaj: table-cell; dar strămoșul său imediat (elementul care îl conține) nu este definit ca un rând de tabel. va fi creat un element de rând anonim. pentru a include în el o celulă și toate elementele conexe ulterioare care sunt, de asemenea, definite de către celula de masă. până când un element care nu aparține celulei de masă este prins. astfel încât acestea vor fi plasate pe aceeași linie. De exemplu, următorul marcaj:

Primele trei elemente div care au clasa "celulă" sunt definite în ecran: table-cell; și vor fi afișate una câte una ca și cum ar fi într-o singură linie, iar ultimul element div nu va fi inclus în rând, deoarece nu se referă la afișarea: table-cell; .

Dacă elementul aparține afișării: rândul de masă; În timp ce strămoșul său nu este definit ca tabel (sau tabel-grup-rând), va fi creat un element anonim alocat afișării: tabel; pentru a include în ea o serie și orice elemente conexe ulterioare, care sunt, de asemenea, definite prin afișare:. De asemenea, dacă elementul este definit ca rând de tabel. nu există suficient element de celule de masă direct în el, va fi creat un element anonim de celule de masă. pentru a include în ele toate elementele definite ca rând de tabel.

Luați în considerare exemplul:

Primele două elemente div care au clasa "rând" sunt definite în afișare: tabel-rând; și vor fi afișate unul sub altul ca și cum ar fi rânduri într-o singură coloană, iar ultimul element div nu va fi inclus în acest tabel.

În mod similar, dacă un element este atribuit oricărui alt parametru de afișare. care acceptă elemente care sunt direct în interiorul elementului tabelă părinte, cum ar fi grupul de tabele-rând. table-header-grup. tabel-footer-grup. table-coloană. tabel-coloană-grup și subtitrare. dar nu are un strămoș definit ca afișaj: tabel; va fi creat un element de masă anonim. pentru a include în el un element și toate elementele conexe ulterioare, cu valori adecvate de afișare.

Alte atribute utile ale tabelelor

Atunci când utilizați tabelele CSS, deoarece elementele corespund normelor obișnuite ale aspectului tabelă, puteți aplica și alte atribute CSS tabulare. Iată câteva dintre ele care pot fi utile:

Tabelul-layout

Alocarea layout-ului tabelului la valoarea fixă indică browserului că tabela ar trebui să fie mapată utilizând un algoritm de formatare fixă pentru lățimea celulelor. Acest lucru este util în marcarea cu lățime fixă pe care am creat-o mai devreme.

Border-colaps

Ca și în tabelele HTML obișnuite, puteți utiliza atributul de colaps de margine pentru a selecta limitele utilizate între celulele tabelului de layout de la colaps sau separat.

Border spațiere

Dacă setați valoarea separată pentru atributul de colaps de margine. Puteți utiliza atributul de spațiu de margine pentru a specifica lățimea spațiului dintre marginile celulei.

Crearea unei rețele ideale

Crearea unei rețele de elemente egale a fost întotdeauna dificilă cu tehnicile tradiționale de marcare CSS, dar tabelele CSS sunt foarte potrivite pentru această sarcină. De exemplu, dacă vrem să creăm o galerie de imagini formată dintr-o rețea de imagini cu nume similare celei de mai jos, atunci utilizarea tabelelor CSS simplifică foarte mult sarcina.

Codul pentru galeria noastră arată astfel:

Fiecare celul din imaginea galeriei conține un element img și un antet în elementul p care se află în div cu clasa "imagine". Fiecare linie este cuprinsă într-un div cu clasa "rând", iar întreaga galerie este situată în elementul div cu clasa "grilă".

CSS-ul necesar pentru marcarea rețelei noastre este foarte simplu:

Acest CSS este destul de simplu, dar puteți observa modul în care folosim atributul de spațiu de frontieră pentru a controla aranjamentul celulelor noastre de imagine. Acesta este cel mai simplu mod de a crea o grilă de marcare - și am împiedicat toate problemele asociate cu înălțimi egale sau margini fragile create cu elemente flotate.

Aplicarea exemplelor în practică

În acest articol, am examinat exemplele de bază ale utilizării parametrilor de tabel al afișării atributului CSS. care este recompensa mult așteptată în lupta pentru crearea de rețele de markup fiabile folosind CSS! Am dezasamblat afișarea numeroaselor parametri de masă. a analizat natura elementelor de masă anonime și a descoperit câteva proprietăți utile ale tabelelor CSS.

Următorul pas este al tău - în orice caz, ați înțeles potențialul folosirii tabelelor CSS pentru a crea grile de marcare și acum ardeți cu curiozitate. Folosind cunoștințele obținute din acest articol, puteți începe experimentele cu propriile machete de tabele CSS.

Tot ce știți despre - css - nu este adevărat