✅ HTML5 - Stiluri avansate pentru tabele

Cuprins

În cadrul noilor specificații ale HTML5 Da CSS Există mai multe stiluri care pot fi aplicate tabelelor pentru a le defini și regla comportamentul în funcție de ceea ce avem ca concept în mintea noastră de a crea paginile sau documentele noastre, elementele pe care le putem modifica sunt marginile tabelelor, manipularea celulelor goale, inclusiv dispunerea aceluiași tabel.
colaps-frontieră
Specifică modul în care sunt tratate chenarele în celulele adiacente, valorile pe care această proprietate le poate presupune sunt: colaps Da separa.
Cu această proprietate putem controla comportamentul modului în care browserul desenează marginile, să vedem această imagine a modului în care browserul o gestionează în mod implicit:

Observăm că o margine este desenată pe masă și o altă margine este desenată în fiecare celulă a aceleiași, aceasta generează un efect de margine dublu, să vedem acum cum cu frontieră-prăbușire ne putem descurca cu această problemă.

 Exemplu 
 Rezultatele sondajului de fructe din 2011 

 
 Rang Yam Culoare  Mărime și voturi 

 

 

 
 Favorit: Merele Verde  Mediu 500 

 
 A doua preferată: Portocale portocale  Mare 450 

 

 
  Întreprinderi cu date de fructe

Rang	Yam	Culoare	Mărime și voturi
Favorit:	Merele	Verde	Mediu	500
A doua preferată:	Portocale	portocale	Mare	450
Întreprinderi cu date de fructe

Să vedem ce generează acest cod în browser înainte de a continua cu explicația:

Valoarea de colaps pe care o plasăm în proprietatea border-collapse ne spune că nu vrem să fie trasată o margine pe fiecare element adiacent, ceea ce creează efectul pe care l-am văzut în imaginea anterioară.
Setarea marginilor separate
Dacă în loc să folosești colaps folosim valoarea implicită separată a proprietății border-collapse, putem folosi proprietăți suplimentare precum spațiere la margine Pentru a defini spațiul dintre marginile elementelor adiacente, să vedem exemplul:

 Exemplu 
 Rezultatele sondajului de fructe din 2011 

 
 Rang Yam Culoare  Mărime și voturi 

 

 

 
 Favorit: Merele Verde  Mediu 500 

 
 A doua preferată: Portocale portocale   

 

 
 Întreprinderi cu date de fructe

Rang	Yam	Culoare	Mărime și voturi
Favorit:	Merele	Verde	Mediu	500
A doua preferată:	Portocale	portocale
Întreprinderi cu date de fructe

În acest exemplu, specificăm pur și simplu că marginea va avea un spațiu de 10 pixeli pentru elementele adiacente, să vedem exemplul modului în care acest lucru se traduce în browser:

Manipularea celulelor goale
Așa cum am văzut în imaginea anterioară, browserul atribuie și un spațiu cu un chenar pentru celulele goale, uneori este posibil să nu-l dorim în tabelul nostru, deci putem face următoarea modificare a codului anterior pentru a putea face față golului celule.

Să vedem cum arată acest lucru în browser:

Într-adevăr, am reușit să scăpăm de celulele goale fără a pierde formatul tabelului nostru.
Cu aceasta încheiem tutorialul, după cum putem vedea, putem aduce multe modificări tabelelor noastre pentru a le adapta la ceea ce putem conceptualiza și adapta la nevoile noastre.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv