Tabeller i HTML5 - del 2

Vi har allerede set, hvordan man opretter en grundlæggende tekst-kun-tabel uden stilarter i del 1 af denne vejledning, selvom det på kodeniveau er fint, på et visuelt niveau viser det os ikke den organisatoriske kraft, som et bord kan levere til vores data, På vores websteder mange gange skal vi klassificere data, elementer, oplysninger generelt, til dette kan vi bruge en velkonstrueret og repræsentativ tabel.
Det element
Elementet th giver os mulighed for at oprette overskrifter til vores bord for visuelt at identificere vores kolonner såvel som td er søn af tr. Dens egenskaber er: colspan, rowspan, scope, headers, de forældede attributter i denne HTML5 -specifikation er som følger: abbr, akse, justering, bredde, forkullelse, udrulning, valign, bgcolor, højde og nurap, omfang, hvis vi ser detaljeret ud, virker dette element meget som td, dens CSS -konvention er som følger:

 den {display: tabel-celle; lodret justering: arve; skrifttype-vægt: fed; tekstjustering: center; } 

Lad os nu se, hvordan vi bruger det til at bygge et bord med lidt mere formatering, end vi tidligere havde gjort:

 Eksempel 
 
 
Rang
Yam
 
Farve
Størrelse
 

 
 
Favorit:
 
Æbler
Grøn
Medium
 

 
 
2. favorit:
 
Appelsiner
orange
Stor
 

 
 
3. favorit:
 
Granatæble
En slags grøn-rød
 
Varierer fra medium til stor
 

 

 

Som vi kunne se i dette eksempel, kan vi placere elementet th indenfor tr, dens funktion ligner td, kun at dette bruges til at generere headers, giver den viste kode os følgende tabel som resultat:

Vores bord begynder at se meget bedre ud, men det er stadig meget grundlæggende, og oplysningerne er ikke så klare som de burde være, f.eks. Overskrifterne og indholdet stemmer ikke overens på en god måde, og visuelt er det svært at skelne mellem, hvilke tilhører hvilken, for Vi kommer til at bruge CSS, og vi vil se, hvordan vi stort set vil løse denne situation.
Til dette vil vi bruge følgende:

Vi har to betingelser for th, begge begynder med at fortælle os, at de er børn af trMen den første vi placerer, at dens justering vil være til venstre, den vil have hvide bogstaver og dens baggrund vil være grå, i den anden angiver vi, at når der kun er en th for hver tr, justerer vi den til højre , vil vi placere en lysere grå baggrund, og bogstaverne vil være mørkere grå.
Lad os se den resulterende kode:

 Eksempel [b] [/ b] 
 
 
Rang
Yam
Farve
Størrelse
 

 
 
Favorit:
Æbler
Grøn
Medium
 

 
 
2. favorit:
Appelsiner
orange
Stor
 

 
 
3. favorit:
Granatæble
En slags grøn-rød
 
Varierer fra medium til stor
 

 

 

Lad os nu se resultatet af denne kode, og vi vil bemærke, hvordan vores tabel på denne måde er meget mere organiseret, og vi kan skelne til hvilken kolonne hver data tilhører.

Som vi kan se, giver dette eksempel os en vision om, hvad et bord skal være, men det er stadig langt fra perfekt. Hvad ville for eksempel ske, hvis vi tilføjer andet th, i informationsrækken? Vi ville miste formatet, hvilket ville få os til at arbejde hver gang bordet ændrer dets struktur.
For at undgå dette er der 3 elementer, der logisk opdeler bordet, så at sige: thead, tbody, tfoot. Med det vi har set, er vi i stand til at forstå uden meget teoretisk forklaring, så lad os gå videre til et praktisk eksempel på dette.

 Eksempel 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Rang
Yam
Farve
Størrelse
 

 
 
Rang
Yam
Farve
Størrelse
 
 
Favorit:
Æbler
Grøn
Medium
 

 
 
2. favorit:
Appelsiner
orange
Stor
 

 
 
3. favorit:
Granatæble
 
En slags grøn-rød
Varierer fra medium til stor
 

 

 

 

Lad os nu se resultatet af dette:

Som vi kan se, er det i det væsentlige det første, vi havde gjort, nu i bunden af ​​tabellen ser vi, at vi har overskriften lige meget, men i koden så vi, hvordan de er to forskellige strukturer, såvel som indholdet.
Med dette afslutter vi vores HTML5 -tabeller, vi skal kun lave et par øvelser og øve det, vi har lært.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt