Distanța HTML dintre coloanele tabelului

Am analizat multe metode de stilare a elementelor dintr-o pagină, cum ar fi informații de text, linkuri, imagini, titluri, dar toate acestea nu sunt încă suficiente. În articolele mele, folosesc adesea elemente HTML, cum ar fi tabelele, pentru că în majoritatea cazurilor acestea ajuta la sistematizare Informații importanteși simplificați prezentarea acestuia.

În acest articol, vă voi prezenta complexitățile stilului tabelelor HTML și veți învăța noi proprietăți CSS concepute pentru a atinge aceste obiective.

Limbajul de marcare hipertext HTML ne-a oferit un număr mare de oportunități de a lega stilurile CSS la zece etichete unice concepute pentru a funcționa cu tabele, sugerez să le repetăm ​​înainte de a studia în continuare:

(„subsolul” tabelului) culoare de fundal – coral, pentru element („antetul tabelului”) setează culoarea de fundal argint.

Pentru elemente

, care se află în interiorul elementului (corpul tabelului) setați culoarea de fundal să se schimbe la trecerea cu mouse-ul (pseudo clasă :hover) c alb pe culoare kaki(întreaga linie este evidențiată).

Rezultatul exemplului nostru:

Orez. 153 Exemplu de stilare a rândurilor din tabele

Următorul exemplu analizează aplicarea rotunjirii colțurilor la celulele tabelului (proprietate).

) setăm căptușeala inferioară la 19 pixeli. Sper ca numerele nepare sa nu te deranjeze :)

Rezultatul exemplului nostru:

Spațiul dintre celule

După exemplul discutat mai sus, este posibil să fi observat că mai avem un decalaj între toate celulele tabelului. Să ne uităm la cum să eliminați spațiul dintre celulele tabelului sau să-l măriți.

Pentru a seta distanța dintre marginile celulelor adiacente, trebuie să utilizați proprietatea CSS margine-spacing.

spațiere-chenar: 30px 10px;

1	2	3
2
3

distanță-limită: 0;

1	2	3
2
3

distanță între margini: 0,2 em;

1	2	3
2
3

În acest exemplu noi:

• plutește la stânga). Dacă ați ratat subiectul elementelor plutitoare, atunci puteți reveni oricând la el în acest tutorial - „”.
• În plus, setăm marginea dreaptă pentru tabele la 30px și setăm alinierea verticală a tabelelor (partea de sus a elementului este aliniată cu partea de sus a celui mai înalt element). Vom reveni la o analiză detaliată a acestei proprietăți în acest articol.

) – stil îndrăzneț.

Pentru celule de tabel(antet și celule de date) setăm un chenar solid de 1px cu culoarea hexadecimal #F50 și setăm umplutură de 19px pe toate părțile.

Pentru prima masă cu clasă .primul setăm spațiul dintre celulele tabelului (proprietatea de spațiere a marginilor) la 30px 10px pentru al doilea tabel cu clasa .al doilea egal cu zero, pentru mesele trei cu clasă .al treilea egal cu 0,2em .

Vă rugăm să rețineți că, dacă este specificată o singură valoare a lungimii în proprietatea de spațiere a frontierei, atunci aceasta indică intervalele, atât pe orizontală, cât și pe verticală, iar dacă sunt specificate două valori ale lungimii, 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:

Afișați chenarele în jurul celulelor tabelului

Poti spune: - deci, am eliminat spațiul dintre celule folosind proprietatea de spațiere a frontierei cu o valoare de 0 , dar de ce se intersectează acum marginile celulelor noastre?

Chenarele duble sunt cauzate de faptul că marginea de jos a unei celule este adăugată la marginea superioară a celulei care se află sub ea, o situație similară are loc pe părțile laterale ale celulelor și acest lucru este logic din punctul de vedere al afișajului tabelului, dar Din fericire, există o modalitate de a spune browser-ului că nu vrem să vedem un comportament atât de liber al marginilor celulelor.

Pentru a face acest lucru, trebuie să utilizați proprietate CSS frontieră-colaps. Poate că nu este ciudat, dar folosirea proprietății border-collapse cu valoarea collapse este cel mai bun mod Cum puteți elimina spațiul dintre celule fără a obține margini duble între ele?

Să comparăm comportamentul frontierelor atunci când folosim proprietatea border-spacing cu o valoare de 0 și proprietatea border-collapse cu o valoare a colaps:

distanță-limită: 0;

1	2	3
2
3

border-colaps: colaps;

1	2	3
2
3

În acest exemplu noi:

• Ne-am făcut mesele să plutească și le-am mutat la stânga (float: left), le-am stabilit marginea exterioară în dreapta la 30px.
• Setați numele tabelului (tag

) – stil îndrăzneț.

Pentru celulele tabelului (antet și celule de date), setăm un chenar solid de 5 px cu culoarea hexagonală # F50 și setăm o lățime fixă ​​de 50 px și o înălțime de 75 px.

Pentru prima masă cu clasă .primul setăm spațiul dintre celulele tabelului la zero (border-spacing : 0 ;), iar pentru al doilea tabel cu clasa .al doilea setați proprietatea border-collapse la colaps , care restrânge marginile celulelor într-una singură atunci când este posibil.

Rezultatul exemplului nostru:

Comportamentul celulelor goale

Puteți utiliza CSS pentru a seta dacă marginile și fundalul celulelor goale dintr-un tabel trebuie să fie afișate sau nu. Acest comportament este controlat de proprietatea empty-cells, care în mod implicit, așa cum ați observat din exemplele anterioare, afișează celulele goale.

Să trecem la un exemplu:

celule goale: arată;

1	2	3
2		☺
3	☺

celule goale: ascunde;

1	2	3
2		☺
3	☺

Pentru a înțelege cum funcționează proprietatea empty-cells din acest exemplu este foarte simplu, dacă este setată să ascundă , atunci celulele goale și fundalul din ele vor fi ascunse, dacă sunt setate pentru afișare (implicit), atunci acestea vor fi afișate.

Locația antetului tabelului

Să ne uităm la o altă proprietate simplă pentru stilarea tabelelor - caption-side , care stabilește poziția antetului tabelului (deasupra sau sub tabel). În mod implicit, proprietatea caption-side este setată la top , ceea ce plasează legenda deasupra tabelului. Pentru a plasa un titlu sub tabel, trebuie să utilizați proprietatea cu valoarea de jos .

Să ne uităm la un exemplu de utilizare a acestei proprietăți:

Antet deasupra tabelului

Nume	Preț
Peşte	350 de ruble
Carne	250 de ruble

Sub tabel

Nume	Preț
Peşte	350 de ruble
Carne	250 de ruble

În acest exemplu am creat doua clase, care controlează poziția antetului tabelului. Clasa întâi ( .SupCaption) pune titlul tabelului deasupra lui, l-am aplicat la primul tabel și la a doua clasă ( .bottomCaption) plasează titlul tabelului sub el, l-am aplicat celui de-al doilea tabel. Clasă .SupCaption are valoarea implicită a proprietății subtitrării și este creată în scopuri demonstrative.

Rezultatul exemplului nostru:

Alinierea orizontală și verticală

În majoritatea cazurilor, atunci când lucrați cu tabele, va trebui să ajustați alinierea conținutului în antet și celulele de date. Proprietatea text-align este utilizată pentru alinierea orizontală, similar cu oricare informații text. Am discutat despre utilizarea acestei proprietăți pentru text mai devreme în articolul „”.

Pentru a seta alinierea conținutului în celule, trebuie să utilizați cuvinte cheie speciale cu proprietatea text-align. Să luăm în considerare aplicația Cuvinte cheie această proprietate în exemplul următor.

Sens	Descriere
stânga	Aliniază textul celulei la stânga. Aceasta este valoarea implicită (dacă direcția textului este de la stânga la dreapta).
dreapta	Aliniază textul celulei la dreapta. Aceasta este valoarea implicită (dacă direcția textului este de la dreapta la stânga).
centru	Aliniază textul celulei la centru.
justifica	Întinde liniile astfel încât fiecare linie să aibă aceeași lățime (întinde textul celulei pentru a se potrivi cu lățimea acesteia).

În acest exemplu am creat patru clase, care specifică diferite aliniamente orizontale în celule și le aplică în ordine rândurilor tabelului. Valoarea din celulă corespunde valorii proprietății text-align

Rezultatul exemplului nostru:

Pe lângă alinierea orizontală, puteți defini și alinierea verticală în celulele tabelului folosind proprietatea vertical-align.

Vă rugăm să rețineți că atunci când lucrați cu celule de tabel, numai următoarele valori* din această proprietate:

* - Valorile sub, super, text-top, text-bottom, lungime și % aplicate unei celule de tabel se vor comporta ca și cum ar folosi valoarea liniei de bază.

Să ne uităm la un exemplu de utilizare:

Sens	Descriere
de bază	Aliniază linia de bază a celulei cu linia de bază a părintelui. Aceasta este valoarea implicită.
top	Aliniază conținutul unei celule vertical la marginea de sus.
mijloc	Aliniază conținutul unei celule vertical în mijloc.
fund	Aliniază conținutul unei celule vertical de-a lungul marginii inferioare.

În acest exemplu am creat patru clase, care specifică diferite aliniamente verticale în celule și le aplică în ordine rândurilor tabelului. Valoarea din celulă corespunde valorii proprietății de aliniere verticală care a fost aplicată acelui rând.

Algoritm pentru plasarea unui aspect de tabel într-un browser

CSS utilizează în mod implicit un algoritm pentru browser pentru a aranja automat aspectul tabelului. În acest caz lățimea coloanei este stabilită de conținutul cel mai larg care nu se sparge al celulei. Acest algoritm poate fi lent în unele cazuri, deoarece browserul trebuie să citească tot conținutul din tabel înainte de a determina aspectul final al acestuia.

Pentru a schimba tipul de aspect al tabelului browserului cu automat pe fix, trebuie să utilizați proprietatea CSS table-layout cu valoarea fixă ​​.

În acest caz, plasarea orizontală depinde numai pe lățimea tabelului și pe lățimea coloanelor, și nu pe conținutul celulelor. Browserul începe să afișeze tabelul imediat după primirea primului rând. Ca rezultat, un algoritm fix vă permite să creați un aspect pentru un astfel de tabel mai rapid decât folosind opțiunea automată. Când lucrați cu tabele mari, puteți utiliza un algoritm fix pentru a îmbunătăți performanța.

Să ne uităm la utilizarea acestei proprietăți folosind următorul exemplu:

table-layout: auto;

Nume	2009	2010	2011	2012	2013	2014	2015	2016
Grâu	125	215	2540	33287	695878	1222222	125840000	125

tabel-aspect: fix;

Nume	2009	2010	2011	2012	2013	2014	2015	2016
Grâu	125	215	2540	33287	695878	1222222	125840000	125

În acest exemplu noi:

Stilizarea rândurilor și coloanelor din tabel

Am atins deja parțial metodele de stilare a rândurilor și coloanelor din tabel în articolul „”. În acest articol, ne-am uitat la utilizarea pseudo-clasei 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 matematica.

Să revizuim tehnicile pe care le-am acoperit mai devreme și să explorăm noi modalități de a stila rândurile și coloanele din tabele. Să trecem la exemple.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

În acest exemplu noi:

Rezultatul exemplului nostru:

Să trecem la următorul exemplu, în care ne vom uita la opțiunile pentru stilarea rândurilor de tabel.

Serviciu	Preț
Sumă	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

În acest exemplu noi:

• Setăm lățimea tabelului la 100% din lățimea elementului părinte și setăm un chenar solid de 1px lățime pentru antet și celulele de date.
• Set pentru element

Etichetă	Descriere
. Definește conținutul tabelului. Definește numele tabelului. Definește celula antet a tabelului. Definește un rând de tabel. Definește o celulă de date de tabel. Folosit pentru a conține antetul grupului în tabel (antetul tabelului). Folosit pentru a conține „corpul” mesei. Folosit pentru a conține „subsolul” tabelului. Definește proprietățile de coloană specificate pentru fiecare coloană dintr-o etichetă Definește un grup de coloane într-un tabel. Lucrul cu indentări de tabel Indentarea tabelului 1 2 3 4 2 3 4 ÎN în acest exemplu Noi: Am asezat masa in centru folosind tehnica centrarii orizontale cu indentaturi exterioare (marja: 0 auto). Pentru numele tabelului (tag

1	2	3	4	5

În acest exemplu noi:

• Am centrat tabelul cu marginile exterioare, am stabilit lățimea și înălțimea celulelor antet la 50 px și am specificat transparent chenar 5 pixeli.
• Am stabilit că la trecerea cu mouse-ul (pseudo-clasă :hover) pe celula antet, aceasta primește fundalul albastru culori, portocale culoarea textului, chenar portocale culori 5 pixeli și raza de rotunjire 100%.
• chenar transparent este necesar pentru a rezerva spațiu pentru chenar, care va fi afișat atunci când treceți cu mouse-ul; dacă acest lucru nu se face, tabelul va „sări”.

Rezultatul exemplului nostru:

Următorul exemplu acoperă utilizarea elementelor HTML Și si stilizarea lor.

Cererea nr.	Serviciu	preț, freacă.	Total
1	Cântând	6 000	6 000
2	spalatul	2 000	2 000
3	Curatenie	1 000	1 000
4	Sâcâială	1 500	1 500
5	Citind	3 000	3 000

În acest exemplu noi:

Rezultatul exemplului nostru:

Ei bine, exemplul final, care este destul de greu de înțeles și necesită cunoștințe avansate în CSS, deoarece atinge subiecte viitoare planificate pentru studiu detaliat în acest curs.

În exemplul anterior, ne-am dat seama că element HTML Puteți aplica o singură proprietate CSS - culoarea de fundal (culoarea de fundal), dar nu puteți seta direct culoarea de fundal atunci când treceți cu mouse-ul (pseudo-clasa :hover) pe acest element. În acest exemplu, ne vom uita la cum să evidențiem o coloană de tabel folosind numai CSS.

Cererea nr.	Serviciu	preț, freacă.	Total
1	Cântând	6 000	6 000
2	spalatul	2 000	2 000
3	Curatenie	1 000	1 000
4	Sâcâială	1 500	1 500
5	Citind	3 000	3 000

În acest exemplu noi:

• Am setat tabelul nostru să ocupe 100% din elementul părinte, celulele tabelului să ocupe 25% din elementul părinte și să aibă un chenar verde solid de 1 pixel, înălțimea antetului și a celulelor de date este de 45px. Am eliminat spațiul dintre celule folosind proprietatea border-collapse cu valoarea .
• Și așa, folosind pseudo-elementul ::after adăugăm conținut după fiecare element pe hover. Pseudo-elementul ::after este necesar să fie utilizat împreună cu proprietatea conținut, datorită căruia inserăm un element bloc care are o culoare de fundal padure verde si are poziționare absolută.
• Poziționarea absolută aici este necesară pentru a compensa elementul în raport cu marginea specificată a strămoșului său, iar strămoșul trebuie să aibă o valoare de poziție diferită de cea implicită - static, în caz contrar, numărarea va fi relativă la marginea specificată a ferestrei browserului, pentru aceasta. motivul pentru care am pus la masă poziționare relativă(relativ).
• Setăm proprietatea de sus pentru blocul nostru generat, care specifică direcția în care elementul poziționat este decalat față de marginea de sus, și proprietatea de jos, care specifică direcția în care elementul poziționat este decalat față de marginea de jos. Pentru ambele proprietăți, a fost specificată valoarea 0, astfel încât blocul va ocupa complet elementul din partea de jos și de sus a tabelului, lățimea acestui bloc a fost setată la 25%, această valoare corespunde lățimii celulei în sine.
• Iar proprietatea finală pe care o setăm pentru acest bloc: z-index cu valoarea „-1” determină ordinea elementelor poziționate conform axa Z. Această proprietate este necesară pentru ca textul să fie în fața acestui bloc, și nu în spatele acestuia; dacă nu setați o valoare mai mică de zero, blocul va acoperi textul.

Rezultatul exemplului nostru:

Dacă în această etapă a studiului dumneavoastră 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 nici noi nu l-am luat în considerare, dar îl vom lua în considerare cu siguranță în următorul articol al manual „Poziționarea elementelor în CSS”.

Întrebări și sarcini pe această temă

Înainte de a trece la următorul subiect, finalizați sarcina de practică:

Dacă întâmpinați dificultăți în finalizarea sarcinii de practică, puteți oricând deschide exemplul într-o fereastră separată și inspectați pagina pentru a înțelege ce cod CSS a fost folosit.

2016-2020 Denis Bolshakov, puteți trimite comentarii și sugestii pe site la [email protected]

Am aflat deja că tabelele HTML au cadru, deși browserele nu le afișează implicit. Dar asta nu este tot, fiecare celulă de tabel are și un cadru numit marginea celulei. Dar asta nu este tot, folosind atribute speciale de etichetă

Puteți modifica distanțele dintre celule și de la celule la cadrul tabelului, precum și umplutura internă de la marginile celulelor la conținutul lor.

Cadrul de tabel HTML, chenarele celulelor, distanțele dintre ele și umplutura.

Prin urmare crearea unui cadru Tabelele HTML și limitele celulelor sale este utilizat un singur atribut de etichetă

- granita. Valoarea atributului este un număr întreg nenegativ (zero în mod implicit) care reprezintă dimensiunea în pixeli. Dar, atenție, dimensiunea se modifică doar la cadrul tabelului; la marginile celulei este întotdeauna neschimbată.

...

Pentru schimbare distante dintre celule(granițele lor) și de la celule la cadru tabele în tag

Se aplică atributul de spațiere între celule. Valorile sale pot fi, de asemenea, doar numere care măsoară distanțe în pixeli.

...

Pentru a instala intern umplutură de la marginile celulei la conținutul lor cerut în etichetă

utilizați atributul cellpadding. Și valorile sale sunt numere care indică dimensiunile pixelilor.

...

Vă rugăm să rețineți că browserele setează în mod implicit valori mici (doi pixeli) pentru spațierea celulelor și spațierea celulelor, așa că pentru a elimina spațierea completă, setați atributele la zero (0).

Exemplu de chenaruri, cadre și umplutură de tabel HTML

Celula 1.1	Celula 1.2	Celula 1.3
Celula 2.1	Celula 2.2	Celula 2.3
Celula 3.1	Celula 3.2	Celula 3.3

Tabel cu doar chenarele celulelor și chenarele setate:

Celula 1.1	Celula 1.2	Celula 1.3
Celula 2.1	Celula 2.2	Celula 2.3
Celula 3.1	Celula 3.2	Celula 3.3

Rezultat în browser

Tabel cu indentări și distanțe modificate:

Desigur, nu este necesar să desenați un cadru și margini de celule pe tabel pentru a modifica indentările interne și distanțele dintre celule.

Conform Sintaxa HTML, browserele adaugă valori de spațiere și de completare a celulelor la dimensiunea tabelului și a celulelor acestuia. De exemplu, dacă setați lățimea celulei la 100 de pixeli și cellpadding="10" - browserele vor adăuga 20 de pixeli la lățime (10 fiecare în stânga și în dreapta) și va deveni 120 pixeli. În general, îți vei da seama pe măsură ce mergi.

Digresiune de la subiect sau cum să eliminați indentațiile de-a lungul marginilor paginii

Inițial, toate browserele instalează margini mici de-a lungul marginilor paginii HTML, care sunt adesea inutile, așa că acum veți învăța cum să le eliminați. În general, aceste informații ar trebui plasate la începutul manualului, dar cu greu ți-ar fi de folos acolo.

La timp, la etichetă Au existat patru atribute care stabileau dimensiunea acestor margini pentru fiecare parte a paginii: marginea superioară (sus), marginea dreaptă (dreapta), marginea inferioară (jos) și marginea stângă (stânga). Acum aceste atribute sunt depășite, așa că vom folosi stiluri (CSS). Deci, puteți modifica distanțele marginilor de-a lungul marginilor paginii în mai multe moduri, vă voi arăta două și veți afla despre al treilea dacă vă decideți să învățați CSS.

Metoda unu. În etichetă indica atribut de stil cu urmatoarele valori:

style="margin:0" >...

- elimină indentările de pe toate părțile paginii HTML simultan.

stil= „margin:sus dreapta jos stânga”>...

- ajustează dimensiunea indentărilor pentru fiecare parte în sensul acelor de ceasornic. De regulă, se folosesc dimensiunile în pixeli, de exemplu: stil= "margin:5px 3px 4px 5px" >...

Al doilea și mai convenabil mod. În etichetă

Teme pentru acasă.

În această lecție, nici nu voi descrie totul în detaliu - doar puncte generale. Pentru a fi complet, uitați-vă la rezultatul exemplului.

1. Creați trei tabele, fiecare constând dintr-un rând și trei coloane (coloane).
2. În primul tabel, plasați Antetul sau „antetul” paginii (a nu se confunda cu „antetul” documentului HTML), în al doilea - meniurile din stânga și din dreapta, precum și conținutul principal (conținut) , în al treilea - subsolul sau „subsolul” paginii.
3. Lățimea primei și ultimei coloane a fiecărui tabel să fie fixă.
4. Important. Utilizați eticheta doar pentru a crea patru butoane meniu orizontalîn antetul paginii. În alte cazuri, lăsați imaginile să treacă în fundal, iar în a doua celulă ale tabelelor sunt folosite doar culori, iar în primul și ultimul tabel este #99FF99.
5. Lăsați textul conținutului paginii să fie aliniat pe ambele părți ale celulei tabelului și titlul centrat.
6. În ceea ce privește distanțele dintre celulele tabelului, precum și indentările celulelor, gândiți-vă singur unde ar trebui să fie eliminate complet și unde ar trebui mărite.

Deci, am studiat cel mai mult cu tine pași simpli, care se poate face cu limite de tabel. Și acum masa arată mult mai plăcută din punct de vedere estetic. Cu toate acestea, umplerea celulelor se sprijină direct pe granițe. Acest lucru poate fi remediat cu ușurință, trebuie doar să indentați celulele tabel HTML. Și apoi textul din interiorul cadrului, din celulă, va fi mai lizibil.

Pentru a indenta o celulă, utilizați atributul umplutură celulară pentru etichetă

. Cu toate acestea, există o altă opțiune, mai preferabilă: CSS.

În acest caz, indentarea este setată folosind proprietatea căptușeală. Cu ajutorul acestuia, nu va fi dificil să indentați acolo unde este necesar, adică în partea de sus, dreapta, jos sau stânga, folosind, respectiv, una dintre aceste proprietăți: padding-top, umplutura-dreapta, umplutură de fundȘi padding-stânga.

Puteți specifica exact câți pixeli ar trebui să fie indentarea. Să dăm un exemplu în care va fi liniuța de jos 20 pixeli, iar restul vor fi 10 . Astfel de CSS-codul va arata astfel:

Td ( umplutură: 10px; umplutură-partea inferioară: 20px; )

Și codul de stil complet în această etapă:

Tabel ( chenar: solid 1px albastru; border-collapse: collapse; ) td ( chenar: solid 1px albastru; umplutură: 10px; padding-bottom: 20px; )

Rezultat în browser:

Spații dintre celule

De regulă, problemele asociate cu crearea tabelelor pot fi rezolvate folosind etichete, atribute și proprietăți care vă permit să creați cadre, indentări în celule și, de asemenea, să setați culoarea de fundal a celulelor în sine.

Indentările din tabele nu se găsesc numai în interiorul celulelor. Ele pot fi prezente și între celule în sine.

Există două opțiuni pentru a face indentări între celule:

1. folosind atributul spațierea celulelor pentru etichetă

.

folosind CSS-proprietăți spaţierea graniţelor.

Trebuie subliniat că spaţierea graniţelor este specificat pentru tabel ca un întreg, în timp ce proprietatea căptușeală este scris direct pentru celule.

Să ne uităm la un exemplu:

Tabel ( chenar: albastru solid de 1 px; restrângere chenar: separat; spațiere margine: 5 px; ) td ( chenar: albastru solid 1 px; umplutură: 10 px; umplutură- jos: 20 px; )

Și rezultatul rezultat:

Permiteți-ne să precizăm imediat că nu ar trebui să încercați să faceți astfel de indentări folosind border-colaps: colaps. La urma urmei, atunci când utilizați această opțiune, celulele se „lipesc” unele de altele.

Și pentru a le menține separate unul de celălalt, ar trebui să le utilizați border-colaps: separat. Este important să înțelegeți asta valoare dată este valoarea implicită. Și este folosit doar pentru a arăta în mod clar cum se rezolvă această problemă. Dacă ștergem această linie, rezultatul sub formă de celule situate separat unul de celălalt va fi salvat.

Tabelele în sine arată destul de slab, iar browserele afișează unele caracteristici ale tabelului, în special cadrele, în felul lor. În același timp, aceste neajunsuri pot fi corectate cu ușurință folosind puterea stilurilor. În același timp, mijloacele de proiectare a tabelelor sunt mult extinse, ceea ce vă permite să încadrați cu succes tabelele în designul site-ului și să prezentați mai clar datele tabelare.

Culoarea de fundal a celulei

Culoarea de fundal a tuturor celulelor tabelului în același timp este setată prin proprietatea de fundal, care este aplicată selectorului TABLE. În acest caz, ar trebui să vă amintiți regulile de utilizare a stilurilor, în special, moștenirea proprietăților elementului. Deși proprietatea de fundal nu este moștenită, valoarea implicită de fundal pentru celule este transparentă, de exemplu. transparență, astfel încât efectul de umplere a fundalului se obține și pentru celule. Dacă, simultan cu TABLE, setați culoarea selectorului TD sau TH, atunci această culoare va fi setată ca fundal al celulei (exemplul 2.3).

Exemplul 2.3. Culoare de fundal

Titlul 1	Titlul 2
Celula 3	Celula 4

În acest exemplu, obținem o culoare albastră de fundal pentru celule (tag ) și roșu la titlu (tag ). Acest lucru se datorează faptului că stilul pentru selectorul TH nu este definit, astfel încât fundalul părintelui, în acest caz selectorul TABLE, este „afișat prin”. Și culoarea pentru selectorul TD este specificată în mod explicit, astfel încât celulele sunt „umplute” cu albastru.

Rezultatul acestui exemplu este prezentat în Fig. 2.4.

Orez. 2.4. Schimbarea culorii de fundal

Margini din interiorul celulelor

Marja este distanța dintre marginea conținutului unei celule și marginea acesteia. De obicei, atributul cellpadding al unei etichete este folosit în acest scop.

. Acesta definește valoarea marjei în pixeli pe toate părțile celulei. Este posibil să utilizați proprietatea stilului de umplutură adăugând-o la selectorul TD, așa cum se arată în Exemplul 2.4.

Exemplul 2.4. Câmpurile din tabele

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlul 1	Titlul 2
Celula 3	Celula 4

În acest exemplu, prin gruparea selectoarelor, câmpurile sunt setate simultan pentru selectoarele TD și TH. Rezultatul exemplului este prezentat în Fig. 2.5.

Orez. 2.5. Câmpuri în celule

Dacă proprietatea stilului de umplutură este aplicată celulelor tabelului, atunci efectul atributului cellpadding al etichetei

ignorat.

Distanța dintre celule

Pentru a modifica distanța dintre celule, utilizați atributul cellspacing al etichetei

. Efectul acestui atribut este clar vizibil atunci când utilizați chenare în jurul celulelor sau când umpleți celulele cu o culoare care iese în evidență din fundalul paginii. Proprietatea de stil border-spacing acționează ca un înlocuitor pentru cellspacing; stabilește distanța dintre marginile celulelor. O valoare setează atât distanța verticală, cât și cea orizontală dintre marginile celulei. Dacă această proprietate are două valori, atunci prima determină distanța orizontală (adică la stânga și la dreapta celulei), iar a doua determină distanța verticală (de sus și dedesubt).

Proprietatea de spațiere a marginilor are efect numai dacă selectorul TABLE nu are proprietatea de restrângere a marginilor setată la restrângere (Exemplul 2.5).

Exemplul 2.5. Distanța dintre marginile celulei

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Rafael	4	11
Michelangelo	24	9
Donatello	2	13

Rezultatul acestui exemplu este prezentat în Fig. 2.6.

Orez. 2.6. Vizualizare tabel atunci când se utilizează spațierea la margini

Browser Internet Explorer versiunile până la și inclusiv versiunea 7 nu acceptă proprietatea de spațiere a marginilor, așa că în acest browser se va folosi valoarea implicită a spației celulelor (de obicei 2px) pentru tabele.

Când se adaugă o proprietate border-collapse cu o valoare de colaps la un selector TABLE, atributul cellspacing este ignorat, iar valoarea margine-spacing este resetata la zero.

Borduri și rame

În mod implicit, inițial nu există chenar în tabel, iar adăugarea acestuia are loc utilizând atributul chenar al etichetei

. Browserele afișează un astfel de chenar în mod diferit, așa că este mai bine să nu specificați deloc acest atribut și să lăsați desenul chenarelor pe seama stilurilor. Să ne uităm la două metode direct legate de stiluri.

Folosind atributul cellspacing

Se știe că atributul cellspacing al etichetei

stabilește distanța dintre celulele tabelului. Dacă utilizați culori diferite de fundal pentru tabel și celule, atunci va apărea o grilă de linii între celule, a cărei culoare se potrivește cu culoarea tabelului, iar grosimea este egală cu valoarea atributului de spațiere a celulelor în pixeli. Exemplul 2.3 de mai sus arată acest efect, așa că nu îl voi repeta.

Rețineți că aceasta nu este o modalitate foarte convenabilă de a crea limite, deoarece are un domeniu limitat. În acest fel puteți obține doar o grilă cu o singură culoare, și nu verticală sau linii orizontaleîn locurile potrivite.

Folosind proprietatea de frontieră

Proprietatea stil de chenar setează simultan culoarea, stilul și grosimea chenarului în jurul unui element. Când trebuie să creați linii separate pe laturi diferite, este mai bine să utilizați derivatele - border-left , border-right , border-top și border-bottom , aceste proprietăți definesc respectiv chenarul din stânga, dreapta, sus și jos .

Aplicând proprietatea border la un selector TABLE, adăugăm un chenar în jurul tabelului ca întreg, iar la un selector TD sau TH adăugăm un chenar în jurul celulelor (Exemplul 2.6).

Exemplul 2.6. Adăugarea unui cadru dublu

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlul 1	Titlul 2
Celula 3	Celula 4

Acest exemplu folosește cadru dublu negru în jurul mesei în sine și un chenar alb solid în jurul fiecărei celule. Rezultatul exemplului este prezentat în Fig. 2.7.

Orez. 2.7. Chenar în jurul mesei și celulelor

Vă rugăm să rețineți că se formează linii duble acolo unde celulele se unesc. Ele sunt obținute din nou datorită acțiunii atributului cellspacing al etichetei

. Deși acest atribut nu apare nicăieri în codul exemplu, browserul îl folosește implicit. Dacă setați , atunci obținem nu linii duble, ci simple, ci de grosime dublă. Pentru a modifica această caracteristică, utilizați proprietatea de stil border-collapse cu valoarea collapse , care este adăugată la selectorul TABLE (exemplul 2.7).

Exemplul 2.7. Crearea unui singur cadru

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlul 1	Titlul 2
Celula 3	Celula 4

Acest exemplu creează o linie verde continuă între celule și o linie neagră în jurul mesei. Toate marginile din tabel au aceeași grosime. Rezultatul exemplului este prezentat în Fig. 2.8.

Orez. 2.8. Chenar în jurul mesei

Alinierea conținutului celulei

În mod implicit, textul dintr-o celulă de tabel este aliniat la stânga. Excepția de la această regulă este eticheta , definește un antet care este centrat. Pentru a schimba metoda de aliniere, utilizați proprietatea stilului text-align (exemplul 2.8).

Exemplul 2.8. Aliniați conținutul celulei pe orizontală

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlul 1	Celula 1	Celula 2
Titlul 2	Celula 3	Celula 4

În acest exemplu, conținutul etichetei este aliniat la stânga și conținutul etichetei - in centru. Rezultatul exemplului este prezentat mai jos (Figura 2.9).

Orez. 2.9. Alinierea textului în celule

Alinierea verticală într-o celulă este întotdeauna centrată, dacă nu este menționat altfel. Acest lucru nu este întotdeauna convenabil, mai ales pentru tabelele al căror conținut de celule variază în înălțime. În acest caz, alinierea este setată la marginea superioară a celulei folosind proprietatea de aliniere verticală, așa cum se arată în Exemplul 2.9.

Exemplul 2.9. Aliniați conținutul celulei pe verticală

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titlul 1	Titlul 2
Celula 1	Celula 2

Acest exemplu setează înălțimea antetului ca 40 de pixeli și textul este aliniat la marginea de jos. Rezultatul exemplului este prezentat în Fig. 2.10.

Orez. 2.10. Alinierea textului în celule

Celulele goale

Browserele afișează diferit o celulă fără nimic în ea. „Nimic” în acest caz înseamnă că nu a fost adăugată nici o imagine, nici un text în interiorul celulei, iar spațiul nu este luat în considerare. Bineînțeles, aspectul celulelor diferă numai dacă în jurul lor este stabilit un chenar. Când folosiți o chenar invizibil, aspectul celulelor, indiferent dacă există sau nu ceva în ele, este același.

Browserele mai vechi nu afișau culoarea de fundal a celulelor de vizualizare goale , așa că atunci când a fost necesar să lăsați o celulă fără conținut, dar să afișați culoarea de fundal, a fost adăugat un spațiu neseparat () în interiorul celulei. Spațiul nu este întotdeauna potrivit, mai ales atunci când trebuie să setați înălțimea celulei la 1-2 pixeli, motiv pentru care designul transparent de un pixel a devenit larg răspândit. Într-adevăr, o astfel de imagine poate fi scalată la discreția ta, dar nu este afișată în niciun fel pe pagina web.

Din fericire, era desenelor cu un singur pixel și a tot felul de distanțiere bazate pe acestea a trecut. Browserele funcționează destul de corect cu tabelele chiar și fără prezența conținutului celulelor.

Pentru a controla aspectul celulelor goale, utilizați proprietatea celule goale; când este setată să ascundă, chenarul și fundalul nu sunt afișate în celulele goale. Dacă toate celulele dintr-un rând sunt goale, atunci întregul rând este ascuns. Celula este considerată goală în următoarele cazuri:

• nu există simboluri deloc;
• celula conține doar o nouă linie, tab sau spațiu;
• vizibilitatea este setată la ascuns.

Plus spatiu de nerupere este perceput ca conținut vizibil, adică celula nu va mai fi goală (exemplul 2.10).

Exemplul 2.10. Celulele goale

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Rafael		11
Michelangelo	24
Donatello		13

Vizualizarea tabelului din browserul Safari este prezentată în Fig. 2.11a. Același tabel din browserul IE7 este prezentat în Fig. 2.11b.

A. În browserul Safari, Firefox, Opera, IE8, IE9

b. În browserul IE7

Orez. 2.11. Vedere a unui tabel cu celule goale