Administrere tabelloppsett i HTML5 - dummies

I HTML gjør det enkelt å legge ut data, tekst og til og med bilder i et nett. Tabeller gjør det enkelt å presentere numeriske data (som naturlig vises i tabellform i regneark og andre lignende applikasjoner).

Men tabellene gjør det også enkelt og praktisk å presentere all slags informasjon som naturlig faller inn i rader og kolonner, og for å bidra til å maksimere plass ved innføring av mange vilkår eller andre elementer som vil kaste bort for mye hvitt plass hvis det går opp mot venstre eller høyre marginer på en side.

Hvis du ser på ting på den riktige måten, bygger all interessant evne og kompleksitet i HTML-tabeller fra tre grunnleggende elementer:

• Borders: Hver grunnleggende tabell har nøyaktig fire kanter som komponerer et rektangel.

• Celler: Dette er de enkelte områdene for data, informasjon, bilder eller hva som helst, inne i bordets grenser.

• Cellespenning: Innenfor en vegg med fire vegger kan du legge til eller slette cellevegger (som vist med cellene på høyre side av bordet på figuren). Når du sletter cellevegger, lager du en celle span flere rader eller kolonner - og det er akkurat det som gjør bordene så fleksible til å imøtekomme forskjellige og interessante celleordninger.

  

Cellespanning og cellebredde virker annerledes. Når du spenner over celler, endrer du celleplass ved å kombinere eller slå sammen celler. Dette trinnet fjerner cellevegger, så å si. Når du justerer dimensjonene til en celle, vanligvis ved hjelp av CSS bredde og høyde kontroller, kan du angi hvor mye plass de vil okkupere.

Tabellen i figuren viser hvordan du kan lage et interessant layout ved å spenne celler i topp- og bunnrader (merket 1 og 7), med to venstre celler (celler 2 og 3) som strekker seg over to rader, og tre høyre celler (celle 4 som strekker seg over to kolonner, og celler 5 og 6 ved siden av).

Hvis du legger bort detaljer om hvordan du kontrollerer den totale tabellbredden og individuelle cellehøyder og bredder, ser det som den grunnleggende HTML-en for et slikt bord ser ut som:

Tabellskisse


 1 


 2 
 3 < 4 


 5 


 6 
 7 


 Forsiktig undersøkelse av denne filen viser at tallene som er inkludert for hver av boksene i tabellen, nummerert 1 til 7, viser hvordan bordet ligger ut. Når du utvikler dine egne bordstrukturer, vil du kanskje ha en lignende tilnærming slik at du kan se og forstå akkurat hva du gjør. 

Prøv å merke de enkelte boksene med økende tall slik at du kan se hvordan organisasjonen spiller ut på en nettside.

Du trenger ikke å fylle bordet ditt med ekte innhold eller rote mye med størrelsesnålingen som filen inneholder i CSS-stil-seksjonene.Tell totalt antall celler over i tabellen, legg til ett til det nummeret, og multipliser resultatet med fire em-bredder for å få tabellbredden (20em i eksempelet).

Bruk 4em som cellebredde i elementdatainformasjonen for tabelldata (), og du er god til å gå. Hvis du holder den totale tabellbredden synkronisert med antall celler på tvers, kan du ikke gå galt! Når du har utarbeidet alle kinks med arrangementet av de enkelte cellene, kan du begynne å tilpasse stilattributtene til ditt hjerteinnhold for å gjøre bordet så lesbart og attraktivt som mulig. Først, skjønt, vil du ha ordningen riktig. Etter det er alt annet vindues dressing.