Specificația CSS oferă posibilități nelimitate pentru proiectarea tabelelor. În mod implicit, tabelul și celulele tabelului nu au margini sau fundal vizibile, iar celulele din tabel nu sunt adiacente una cu cealaltă.

Lăţime celule de tabel determinat de lățimea conținutului lor, astfel încât lățimea coloanelor din tabel poate varia. Înălțimea tuturor celulelor dintr-un rând este aceeași și este determinată de înălțimea celei mai înalte celule.

Formatarea tabelelor

1. Chenarele tabelului

Implicit, tabelul și celulele din interiorul acestuia sunt afișate în browser fără margini vizibile. Borduri de masă sunt specificate de proprietatea de frontieră:

Tabel (border-collapse: collapse; /*elimină spațiile goale dintre celule*/ chenar: 1px gri solid; /*setează marginea exterioară a tabelului la o culoare gri de 1px grosime*/ )

Marginile celulei antet fiecare coloană este specificată pentru al-lea element:

Th (chenar: 1px gri solid;)

Frontiere de celule corpurile de tabel sunt specificate pentru elementul td:

Td (chenar: 1px gri solid;)

Grosimea marginilor celulelor adiacente nu este dublată, așa că puteți seta margini pentru întregul tabel în felul următor:

Th, td (chenar: 1px gri solid;)

Puteți evidenția marginea exterioară a unui tabel oferindu-i o lățime crescută:

Tabel (chenar: 3px gri solid;)

Limitele pot fi stabilite parțial:

/* setează un chenar exterior gri cu grosimea de 3 px pentru tabel */ table (border-top: 3px solid gray; ) /* setează un chenar gri de 1px grosime pentru celula corpului tabelului */ td (border-bottom: 1px solid gri;)

Puteți citi mai multe despre proprietatea de frontieră.

2. Cum să setați lățimea și înălțimea mesei

Mod implicit lățimea și înălțimea mesei determinată de conținutul celulelor sale. Dacă lățimea nu este specificată, atunci aceasta va fi egală cu lățimea celui mai lat rând (rând).

Lățimea tabelului și a coloanei este setat folosind proprietatea width. Dacă pentru un tabel este specificat tabel (lățime: 100%;), atunci lățimea tabelului va fi egală cu lățimea blocului container în care se află.

Lățimea tabelului și a coloanelor este de obicei specificată în px sau %, de exemplu:

Tabel (lățime: 600 px;) th (lățime: 20%;) td:primul copil (lățime: 30%;)

Înălțimea mesei nu este specificat. Înălțimea rândului tabelele pot fi manipulate prin adăugarea elementelor de umplutură de sus și de jos Și . Fixarea înălțimii folosind proprietatea înălțime nu este recomandată.

Th, td (padding: 10px 15px;)

3. Cum să setați fundalul tabelului

Mod implicit fundal de masă iar celulele sunt transparente. Dacă pagina sau blocul care conține tabelul are un fundal, acesta va apărea prin tabel. Dacă fundalul este specificat atât pentru tabel, cât și pentru celule, atunci în locurile în care fundalul tabelului și al celulelor se suprapun, va fi vizibil doar fundalul celulelor. Fundalul tabelului ca întreg și al celulelor acestuia poate fi:
umplere,
,
.

4. Coloane de tabel

Model Tabelele CSS concentrat în principal pe linii (rânduri) formate folosind eticheta

folosind eticheta

Puteți seta fundalul pentru orice număr de coloane;

folosind tabelul de selecție td:first-child , table td:last-child puteți seta stiluri pentru prima sau ultima coloană a tabelului (cu excepția primei celule a antetului tabelului);

Folosind selectorul de tabel td:nth-child (regula de selecție a coloanelor), puteți seta stiluri pentru orice coloană de tabel.

Puteți citi mai multe despre selectoarele CSS.

5. Cum să adăugați un titlu de tabel

Puteți adăuga un titlu la un tabel folosind o etichetă , iar folosind proprietatea caption-side poate fi plasat în fața sau sub tabel. Pentru aliniere orizontala Textul titlului folosește proprietatea text-align. Mostenit.

6. Cum să eliminați spațiul dintre cadrele celulare

În mod implicit, cadrele celulelor tabelului sunt separate printr-un spațiu mic. Dacă setați border-collapse: collapse pentru tabel, decalajul va fi eliminat. Proprietatea este moștenită.

Sintaxă

Tabel (border-collapse: collapse;)
Orez. 3. Exemplu de tabele cu cadre de celule combinate și separate

7. Cum să măriți spațiul dintre cadrele celulare

Folosind proprietatea de spațiere a frontierei, puteți modifica distanța dintre cadrele de celule. Această proprietate se aplică tabelului ca întreg. Mostenit.

Sintaxă

Tabel (border-collapse: separat; border-spacing: 10px 20px;) tabel (border-collapse: separat; border-spacing: 10px;) Orez. 4. Exemplu de tabele cu spații mărite între cadrele de celule

8. Cum să ascundeți celulele goale ale tabelului

Proprietatea celule goale ascunde sau arată celulele goale. Afectează numai celulele care nu conțin conținut. Dacă o celulă este setată pe fundal și un tabel este setat pe tabel (border-collapse: collapse;) , atunci celula nu va fi ascunsă. Mostenit.

9. Aranjați un tabel utilizând proprietatea table-layout

Aspectul tabelului este determinat de una dintre două abordări: aspect fix sau aspect automat. Sub aspectul în în acest caz, se referă la modul în care lățimea tabelului este distribuită între lățimile celulelor. Proprietatea nu este moștenită.

Sintaxă

Tabel (aspect de masă: fix;)

10. Cele mai bune scheme de masă

1. Minimalism orizontal

Tabelele orizontale sunt tabele în care textul este citit orizontal. Fiecare entitate este un rând separat. Puteți aranja mese similare în stil minimalist prin plasarea unui chenar de doi pixeli sub antetul al-lea.

La cantitati mari rânduri, acest design de masă le face dificil de citit. Pentru a rezolva această problemă, puteți adăuga un chenar de un pixel sub toate elementele td.

Td ( chenar-jos: 1px solid #ccc; culoare: #669; padding: 9px 8px; tranziție: .3s liniar; )/*restul codului este ca în exemplul de mai sus*/

Adăugarea unui efect :hover la elementul tr va face tabelele concepute într-un stil minimalist mai ușor de citit. Când treceți mouse-ul peste o celulă, celulele rămase din același rând sunt evidențiate simultan, ceea ce face mai ușoară urmărirea informațiilor dacă tabelele au mai multe coloane.

Th (greutate font: normal; culoare: #039; umplutură: 10px 15px; ) td (culoare: #669; chenar-sus: 1px solid #e8edff; umplutură: 10px 15px; ) tr:hover td (fond: #e8edff ;)

2. Minimalism vertical

Deși astfel de tabele sunt rar utilizate, tabelele orientate vertical sunt utile pentru clasificarea sau compararea descrierilor obiectelor reprezentate de o coloană. Le puteți proiecta într-un stil minimalist adăugând spațiu pentru a separa coloanele.

Th (greutate font: normal; chenar-jos: 2px solid #6678b1; chenar-dreapta: 30px continu #fff; chenar-stânga: 30px solid #fff; culoare: #039; umplutură: 8px 2px; ) td ( chenar- dreapta: 30px solid #fff-stânga: 30px culoare #fff: 12px 2px;

3. Stilul „la cutie”.

Cel mai de încredere stil pentru proiectarea meselor de toate tipurile este așa-numitul stil „cutie”. Este suficient să alegi unul bun schema de culori, apoi setați culoarea de fundal pentru toate celulele. Nu uitați să subliniați diferența dintre linii prin setarea chenarelor ca separator.

Th ( dimensiunea fontului: 13px; greutatea fontului: normal; fundal: #b9c9fe; chenar-sus: 4px solid #aabcfe; chenar-bottom: 1px solid #fff; culoare: #039; umplutură: 8px; ) td ( fundal : #e8edff: 1px solid #fff: 1px transparent tr:hover (fond: #ccddff;)

Cel mai dificil este să găsești schema de culori care să se potrivească armonios cu site-ul tău. Dacă site-ul are o grămadă de grafică și design, atunci îți va fi destul de dificil să folosești acest stil.

Tabel (familie de fonturi: „Lucida Sans Unicode”, „Lucida Grande”, Sans-Serif; dimensiunea fontului: 14px; lățime maximă: 70%; lățime: 70%; alinierea textului: centru; restrângere margine: restrângere ; border-top: 7px bord-bottom: 13px font-weight: #e8edff-right: 1px; solid #9baff1; culoare: #039; padding: 8px; ) td (fond: #e8edff; chenar-dreapta: 1px solid #aabcfe; margine-stânga: 1px solid #aabcfe; culoare: #669; )

4. Zebră orizontală

Masa cu zebră arată destul de atractivă și confortabilă. Culoare suplimentară Fundalul poate servi drept indiciu vizual pentru oameni când citesc tabelul.

Th ( greutate font: normal; culoare: #039; umplutură: 10px 15px; ) td ( culoare: #669; chenar-sus: 1px solid #e8edff; umplutură: 10px 15px; ) tr:nth-child(2n) ( fundal: #e8edff;)

5. Stilul ziarului

Pentru a obține așa-numitul efect de ziar, puteți aplica chenare elementelor tabelului și puteți juca cu celulele din interior. Un stil de ziar ușor și minimalist ar putea arăta astfel: jucați-vă cu schema de culori, adăugați chenaruri, căptușeală, medii diferite, și efect:hover atunci când treceți peste o linie.

Tabel (chenar: 1px solid #69c;) th (greutate font: normal; culoare: #039; chenar-jos: 1px punct #69c; umplutură: 12px 17px; ) td (culoare: #669; umplutură: 7px 17px; ) tr:hover td (fond: #ccddff;)

Tabel (chenar: 1px solid #69c;) th (greutate font: normal; culoare: #039; umplutură: 10px; ) td (culoare: #669; margine-sus: 1px întreruptă #fff; umplutură: 10px; fundal: #ccddff; ) tr:hover td (fond: #99bcff;)

Tabel (chenar: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; culoare: #039; text-transform: majuscule; margine-dreapta: 1px solid #0865c2; chenar-sus: 1px solid #0865c2; chenar-stânga: 1px solid #0865c2: 1px solid;

6. Fundalul tabelului

Dacă sunteți în căutarea unui rapid și mod unic designul mesei, alegeți o imagine sau o fotografie atractivă legată de tema mesei și setați-o ca fundal pentru masă.

Jpg") fără repetare; poziție fundal: 100% 55px; ) th ( greutate font: normal; culoare: #339; umplutură: 10px 12px; ) td ( fundal: url("https://site/images/ spate..png"); fundal: transparent; )

Vlad Merjevici

Când aranjați folosind tabele, trebuie să cunoașteți unele caracteristici care sunt inerente tabelelor. Acest lucru este necesar pentru a înțelege cum să construiți un aspect într-un caz dat, să creați un cod eficient și să evitați greșelile directe în lucrare. Se crede că aspectul tabelului este mai simplu decât alte metode, de exemplu, folosind straturi. Cu toate acestea, tabelele sunt, de asemenea, pline de multe trucuri care, într-un fel sau altul, afectează afișarea paginii.

Lățimea mesei

Lățimea tabelului, dacă nu este specificat în mod explicit, este setată automat de browser pe baza conținutului celulelor. Când un tabel este folosit pentru a crea o grilă de referință pe o pagină, această abordare nu este de dorit deoarece depinde de date variabile. Prin urmare, lățimea tabelului este întotdeauna indicată - ca procent dacă este utilizat un aspect „fluid”, sau în pixeli pentru un aspect cu lățime fixă.

Lățimea celulei

Lățimea celulelor este determinată de atributul width al etichetei , iar această valoare trebuie setată dacă trebuie specificată lățimea celulei.

Să luăm un exemplu de caz în care trebuie specificată dimensiunea celulei. Să presupunem că trebuie să creăm două coloane pe o pagină web, una dintre ele ar trebui să aibă o dimensiune de 200 de pixeli, iar a doua ar trebui să ocupe spațiul rămas. Creăm un tabel cu două celule și setăm parametrul width="200" pentru celula din stânga (exemplul 1). Nu este nevoie să setați unitățile de măsură, browserul însuși înțelege că, dacă este specificat un număr, atunci sunt utilizați pixeli.

Exemplul 1. Lățimea celulei

Din moment ce în în acest exemplu lățimea tabelului este specificată ca 100%, tabelul va ocupa întreaga lățime liberă a ferestrei browserului. În acest caz, coloana din stânga ocupă 200 de pixeli, iar coloana din dreapta ocupă spațiul liber rămas.

Lățimea celulei se poate modifica uneori, în ciuda faptului că este specificată rigid. Acest lucru se întâmplă, de exemplu, dacă la o celulă a fost adăugată o imagine, a cărei dimensiune depășește lățimea celulei. Pentru a găzdui imaginea, celula va fi forțată să se extindă. Conținutul text al unei celule, care conține un cuvânt foarte lung, poate afecta și dimensiunea unei celule.

Pentru a evita această situație, se folosesc mai multe mijloace.

• Imaginile care sunt mai mari decât lățimea celulei nu sunt adăugate la o celulă cu lățime fixă. Metoda, desigur, sună banal, totuși, cunoscând caracteristicile celulelor, puteți evita problemele cu afișarea lor.
• Pentru etichetă utilizați proprietatea stil table-layout cu valoarea fixed . Utilizarea acestei proprietăți vă permite să decupați imaginea dacă nu se încadrează în întregime în celulă (exemplul 2).

  Exemplul 2. Proprietatea table-layout

  ...

  Rezultatul acestui exemplu este prezentat în Fig. 1.

  Browsere moderne (Firefox 3+, Internet Explorer 8+, Chrome și Safari) arată tabelul ușor diferit (Fig. 2).

  

  Orez. 2. Afișați imaginea în browser Safari

  • Utilizați proprietatea stil overflow cu valoarea de defilare. Această proprietate adaugă bare de defilare la conținut, dar deoarece se aplică elementelor de bloc, nu poate fi utilizată pe o etichetă . Prin urmare, trebuie să puneți o etichetă în interiorul celulei
    și setați o proprietate de stil pentru aceasta (exemplul 3). Acest lucru, desigur, nu este în întregime corect și convenabil, dar poate da rezultatul necesar.

  Exemplul 3: bare de defilare în celule

  ...

  Rezultatul acestui exemplu este prezentat în Fig. 3.

  

  Conținutul celulei

  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 când trebuie să setați înălțimea celulei la 1-2 pixeli, motiv pentru care desen transparent dimensiunea unui pixel. Î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.

  Unirea celulelor

  Să presupunem că dorim să folosim o unire a unor celule într-un tabel, așa cum se arată mai jos. Mai mult, înălțimea celulelor portocalii și gri este setată rigid și egală cu 30 de pixeli.

  Celula 1	Celula 2
  Celula 3
  Celula 4

  Pentru claritate, codul pentru acest tabel este prezentat în exemplul 4.

  Exemplul 4: Tabel cu celule îmbinate

  Celula 1	Celula 2
  Celula 3
  Celula 4

  Deși înălțimea celulei portocalii pare a fi fixă, se poate schimba în mod arbitrar în funcție de cantitatea de informații din alte celule. O problemă similară a fost observată în unele browsere.

  Pe măsură ce complexitatea tabelului crește prin creșterea numărului de celule și a uniunilor acestora, probabilitatea de erori la afișarea documentului crește. Din acest motiv, îmbinarea celulelor pe verticală este folosită destul de rar și în cazurile în care înălțimea celulelor nu are un impact semnificativ asupra aspectului paginii.

  Pentru a primi rezultatul dorit, un tabel este împărțit în mai multe tabele mici sau un tabel este imbricat în interiorul unei celule a altui tabel. Tabelele imbricate au devenit larg răspândite tocmai pentru că dau un rezultat stabil și uniform.

  Viteza de încărcare a mesei

  Până când tabelul este complet încărcat, conținutul acestuia nu va începe să fie afișat. Cert este că browserul, înainte de a afișa conținutul tabelului, trebuie să calculeze dimensiunile cerute celule, lățimea și înălțimea acestora. Și pentru asta trebuie să știi ce este în aceste celule. Prin urmare, browserul așteaptă până când totul din celule este încărcat și abia apoi afișează tabelul.

  Pe baza acestui fapt, mesele nu sunt folosite pentru depozitare o mulțime de informații(de la 100 kB). Și pentru a accelera încărcarea unui aspect de tabel, acesta este împărțit în tabele separate sau este utilizată proprietatea table-layout, a cărei utilizare vă permite să creșteți ușor viteza de afișare a conținutului tabelului.

  Salutare tuturor! Deci, acum puteți crea tabele elementare constând din câte rânduri și coloane este necesar. Nu e rău nu e rău. Acum să vorbim despre designul acestor mese.

  În lecția anterioară, tabelele au fost afișate fără margini. Și, vezi tu, arată așa, așa că nici măcar nu poți numi asta un semn. Pentru a crea chenarele tabelului în HTML, ar trebui să adăugați la etichetă

  atribut frontieră, dându-i o altă valoare decât zero.

  Deci, să facem chenarele pentru masă. De exemplu, pentru cel pe care îl avem deja:

  Celula din stânga sus	Celula din dreapta sus
  Celula din stânga jos	Celula din dreapta jos

  Rezultat în browser:
  

  Cum să eliminați chenarele tabelului

  La rândul său, pentru a elimina granițele Tabelele HTML, sau mai poți spune, fă-le invizibile, ai nevoie de atributul frontieră valoarea stabilită 0 . După acești pași simpli, cadrul va fi îndepărtat.

  Atributul vă permite să creați, dar nu să gestionați, limite. Vă permite doar să le schimbați grosimea.

  Prin urmare, acum vom vorbi despre CSS, ale căror proprietăți fac posibilă utilizarea frontieră creați diferite margini, atât în ​​interiorul fiecărei celule, cât și externe, în jurul mesei în ansamblu.

  Să vedem cum să folosiți CSS pentru a crea externe și frontierele interne Mese.
  Pentru a face acest lucru, eliminați atributul border din tabelul nostru și adăugați stiluri:

  Celula din stânga sus	Celula din dreapta sus
  Celula din stânga jos	Celula din dreapta jos

  Rezultat în browser:
  

  Acum haideți să adăugăm și borduri pentru fiecare celulă. Pentru a face acest lucru, adăugați pur și simplu stiluri:

  Rezultat în browser:
  

  Cum să eliminați umplutura între celule dintr-un tabel HTML

  De acord că limita specificată cu folosind CSS, nu are așa ceva aspect, așa cum ne-am dori. Fără îndoială, din punct de vedere estetic, există ceva de lucrat. Pe pagina browserului puteți vedea că în mod implicit afișează separat chenarele tabelului și celulelor. Exemplul demonstrează clar acest lucru.

  Cu toate acestea, este foarte posibil să scăpați de astfel de granițe, care se numesc duble, dacă utilizați CSS proprietate de frontieră-colaps. În practică arată astfel:

  Tabel (chenar: albastru solid 1px; chenar-restrângere: restrângere; ) ...

  Ca rezultat, distanța dintre celule este eliminată:
  

  Valoarea de restrângere atribuită atributului chenar vă permite să eliminați chenarele duble. După cum puteți vedea, rezultatul este „prăbușirea” granițelor celulelor situate în apropiere, precum și cadrele celulelor și cadru exterior Mese. În ceea ce privește acesta din urmă, acesta poate fi îndepărtat complet. Și dacă este nevoie să-l afișați, trebuie să-i măriți lățimea. Astfel am scăpat de separatoarele din tabel. Și în lecția următoare vom vorbi despre cum puteți stabili limite verticale și orizontale. Noroc tuturor!

  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 o culoare pentru selectorul 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 Culoarea albastră fundalul celulei (etichetă ) ș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 utilizat în acest scop.

  . Acesta definește valoarea marginii în pixeli pe toate părțile celulei. Este permisă folosirea stilului proprietatea de umplutură prin adăugarea acestuia 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 margine-spațiere acționează ca un înlocuitor pentru celulă spațiere stabilește distanța dintre marginile celulelor. O singură valoare setează distanța verticală și 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

  Motor de cautare Explorer versiunea 7 și o versiune ulterioară 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ă acest lucru nu este în totalitate mod convenabil creând limite pentru că are o sferă 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 laturi diferite, este mai bine să folosiț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 cadru solid albî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 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

  În acest exemplu, creează linie solida verde între celule și negru î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 când trebuie să setați înălțimea celulei la 1-2 pixeli, motiv pentru care graficele transparente cu un singur pixel au devenit larg răspândite. Î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

  CSS vă permite să setați nu numai stilul marginii tabelului, ci și stilul marginilor celulelor individuale. Deoarece fiecare celulă are propriile margini, granița dintre celulele adiacente este dublă. Dar este posibil să combinați limitele celulelor învecinate într-una singură. Există o proprietate de prăbușire a graniței pentru asta. Ia valori:

  border-collapse: separat - fiecare celulă are propriul ei chenar (implicit)

  border-collapse: colaps - chenar partajat

  border-collapse: inherit - valoarea este preluată din elementul părinte

  De exemplu, să creăm un tabel și să setăm un cadru pentru celulele tuturor tabelelor care vor fi pe pagină. Să nu schimbăm nimic la început pentru a vedea cum va arăta tabelul:

  Stil:

  1 2 3 4 5 6

  '); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) ( return ' url(\'' + dir_path + '/' + str.replace) (/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); )); splited_css += ""; ) var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) ( td_theme_css.after(splitted_css); ) ) )); ) ))();