Tabeller i HTML5 - del 2

Vi har allerede sett hvordan vi lager en grunnleggende tekst-bare tabell uten stiler i del 1 av denne opplæringen, selv om dette på kodenivå er greit, på visuelt nivå viser det oss ikke den organisatoriske kraften som et bord kan gi våre data, På nettstedene våre mange ganger må vi klassifisere data, elementer, informasjon generelt, for dette kan vi bruke en godt konstruert og representativ tabell.
Elementet
Elementet th lar oss lage overskrifter til bordet vårt for å visuelt identifisere kolonnene våre så vel som td er sønn av tr. Attributtene er: colspan, rowspan, scope, headers, er de utdaterte attributtene i denne HTML5 -spesifikasjonen som følger: abbr, akse, juster, bredde, røye, utrulling, valign, bgcolor, høyde og nårap, omfang, hvis vi ser i detalj, fungerer dette elementet veldig likt td, CSS -konvensjonen er som følger:

 th {display: table-cell; loddrett justering: arve; font-weight: fet skrift; tekstjustering: senter; } 

La oss nå se hvordan du bruker det til å bygge et bord med litt mer formatering enn vi tidligere hadde gjort:

 Eksempel 
 
 
Rang
Yam
 
Farge
Størrelse
 

 
 
Favoritt:
 
Epler
Grønn
Medium
 

 
 
Andre favoritt:
 
Appelsiner
oransje
Stor
 

 
 
3. favoritt:
 
Granateple
En slags grønn-rød
 
Varierer fra middels til stor
 

 

 

Som vi kunne se i dette eksemplet, kan vi plassere elementet th innen tr, dens funksjon er lik td, bare at dette brukes til å generere overskrifter, gir koden som vises oss følgende tabell som et resultat:

Bordet vårt begynner å se mye bedre ut, men det er fortsatt veldig grunnleggende, og informasjonen er ikke så klar som den burde være, for eksempel overskrifter og innhold samsvarer ikke på en god måte, og visuelt er det vanskelig å skille mellom hvilke tilhører hvilken, for Vi skal bruke CSS, og vi vil se hvordan vi i stor grad vil løse denne situasjonen.
Til dette vil vi bruke følgende:

Vi har to betingelser for thBegge begynner med å fortelle oss at de er barn av trMen den første vi plasserer at dens justering vil være til venstre, den vil ha hvite bokstaver og bakgrunnen vil være grå, i den andre indikerer vi at når det bare er en th for hver tr vil vi justere den til høyre , vil vi plassere en lysere grå bakgrunn og bokstavene blir mørkere grå.
La oss se den resulterende koden:

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

 
 
Favoritt:
Epler
Grønn
Medium
 

 
 
Andre favoritt:
Appelsiner
oransje
Stor
 

 
 
3. favoritt:
Granateple
En slags grønn-rød
 
Varierer fra middels til stor
 

 

 

La oss nå se resultatet av denne koden, og vi vil legge merke til hvordan tabellen på denne måten er mye mer organisert, og vi kan skille hvilken kolonne hver data tilhører.

Som vi kan se, gir dette eksemplet oss en visjon om hva et bord skal være, men det er fortsatt langt fra perfekt. Hva ville for eksempel skje hvis vi legger til andre th, i informasjonsraden? Vi ville miste formatet, noe som ville få oss til å jobbe hver gang bordet endrer strukturen.
For å unngå dette er det tre elementer som logisk deler bordet, så å si: thead, tbody, tfoot. Med det vi har sett, er vi i stand til å forstå uten mye teoretisk forklaring, så la oss gå videre til et praktisk eksempel på dette.

 Eksempel 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Rang
Yam
Farge
Størrelse
 

 
 
Rang
Yam
Farge
Størrelse
 
 
Favoritt:
Epler
Grønn
Medium
 

 
 
Andre favoritt:
Appelsiner
oransje
Stor
 

 
 
3. favoritt:
Granateple
 
En slags grønn-rød
Varierer fra middels til stor
 

 

 

 

La oss nå se resultatet av dette:

Som vi kan se, er det i hovedsak det første vi hadde gjort, nå nederst i tabellen ser vi at vi har overskriften likt, men i koden så vi hvordan de er to forskjellige strukturer, så vel som innholdet.
Med dette fullfører vi opplæringen i HTML5 -tabeller, vi trenger bare å gjøre noen få øvelser og øve på det vi har lært.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng