✅ HTML5 - Napredni stilovi za tablice

Sadržaj

Unutar novih specifikacija za HTML5 Y CSS Postoji nekoliko stilova koji se mogu primijeniti na tablice kako bi se dodatno definiralo i prilagodilo njihovo ponašanje onome što imamo kao koncept u umu kako bismo naše stranice ili dokumente učinili, elementi koje možemo mijenjati su rubovi tablica, rukovanje praznim ćelijama, uključujući raspored istog stola.
urušavanje granice
Određuje kako se rubova rukuje u susjednim ćelijama, vrijednosti koje ovo svojstvo može pretpostaviti su: kolaps Y odvojiti.
S ovim svojstvom možemo kontrolirati ponašanje preglednika kako iscrtava granice, pogledajmo ovu sliku načina na koji preglednik to rukuje prema zadanim postavkama:

Primjećujemo da je na stolu iscrtana granica, a u svakoj istoj ćeliji iscrtana je druga granica, što stvara učinak dvostruke ivice, da vidimo sada kako urušavanje granice možemo riješiti ovaj problem.

 Primjer 
 Rezultati ankete o voću iz 2011. godine 

 
 Rang Jam Boja  Veličina i glasovi 

 

 

 
 Omiljeno: Jabuke Zeleno  Srednji 500 

 
 2. favorit: Naranče naranča  Veliki 450 

 

 
  Poduzeća s podacima o voću

Rang	Jam	Boja	Veličina i glasovi
Omiljeno:	Jabuke	Zeleno	Srednji	500
2. favorit:	Naranče	naranča	Veliki	450
Poduzeća s podacima o voću

Pogledajmo što ovaj kôd generira u pregledniku prije nego nastavimo s objašnjenjem:

Vrijednost skupljanja koju stavljamo u svojstvo border -rupt govori nam da ne želimo da se na svakom susjednom elementu iscrtava granica, što stvara učinak koji smo vidjeli na prethodnoj slici.
Postavljanje zasebnih rubova
Ako umjesto korištenja kolaps koristimo zasebnu zadanu vrijednost svojstva obruba granica, možemo koristiti dodatna svojstva poput razmak granica Da bismo definirali prostor između granica susjednih elemenata, pogledajmo primjer:

 Primjer 
 Rezultati ankete o voću iz 2011. godine 

 
 Rang Jam Boja  Veličina i glasovi 

 

 

 
 Omiljeno: Jabuke Zeleno  Srednji 500 

 
 2. favorit: Naranče naranča   

 

 
 Poduzeća s podacima o voću

Rang	Jam	Boja	Veličina i glasovi
Omiljeno:	Jabuke	Zeleno	Srednji	500
2. favorit:	Naranče	naranča
Poduzeća s podacima o voću

U ovom primjeru jednostavno specificiramo da će granica imati prostor od 10 piksela za susjedne elemente, pogledajmo primjer kako se to prevodi u preglednik:

Rukovanje praznim ćelijama
Kao što smo vidjeli na prethodnoj slici, preglednik također dodjeljuje prostor s obrubom za prazne ćelije, što ponekad možda ne želimo u našoj tablici, pa možemo napraviti sljedeću izmjenu prethodnog koda kako bismo se mogli nositi s praznim ćelijama Stanice.

Pogledajmo kako ovo izgleda u pregledniku:

Doista, uspjeli smo se riješiti praznih ćelija bez gubitka formata naše tablice.
Ovime završavamo vodič, kao što vidimo možemo napraviti mnogo izmjena u našim tablicama kako bismo ih prilagodili onome što možemo zamisliti i prilagoditi našim potrebama.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod