Hvordan man bygger og definerer en grunnleggende tabell for HTML5 og CSS3 webbaserte sider - dummies

Noen ganger møter du data som passer best i et tabellformat i stedet for en liste. HTML5 støtter flere tabellkoder for denne typen arbeid. Her kan du se et veldig grunnleggende bord.

Noen ganger er den beste måten å vise data på en meningsfull måte å organisere den i et bord. HTML definerer en tabell med taggen. Tabellen inneholder en rekke tabellrader (definert med taggen). Hver tabellrad kan bestå av en rekke tabelldata ( ) eller tabelloverskrift ( ).

Sammenlign utdataene med koden for basicTable. html som lager den:

basicTable. html

En grunnleggende tabell

HTML Super Heroes


 Hero 
 Kraft 
 Nemesis 


 HTML-koden 
 Standardsoverensstemmelse 
 Sloppy Code Boy 


 Kaptein CSS 
 Super -layout 
 Lord Deprecated 


 Browser Woman 
 Mega-kompatibilitet 
 Ugly Code Monster

Hero	Kraft	Nemesis
HTML-koden	Standardsoverensstemmelse	Sloppy Code Boy
Kaptein CSS	Super -layout	Lord Deprecated
Browser Woman	Mega-kompatibilitet	Ugly Code Monster

HTML-tabellen er definert med paret. Det gir mye mening å innrykk og plassere koden din nøye, slik at du kan se bordets struktur i koden. Bare ved å kikke på koden, kan du gjette at bordet består av tre rader, og hver rad består av tre elementer.

I et tekstbehandlingsprogram lager du vanligvis et tomt bord ved å definere antall rader og kolonner, og deretter fylle det inn. I HTML definerer du tabellraden for rad, og elementene i hver rad bestemmer antall kolonner. Det er opp til deg å sørge for at hver rad har det samme antall elementer.

Som standard (i de fleste nettlesere, uansett), viser tabellene ikke sine grenser. Hvis du vil se grunnleggende bordgrenser, kan du slå på bordets attributt. (En attributt er en spesiell modifikator du kan knytte til noen koder.)

Denne taggen oppretter et bord og angir at det vil ha en grense med størrelse. Hvis du forlater virksomheten, viser noen nettlesere en grense, og noen gjør det ikke. Du kan angi grenseverdien til eller til et større tall. Jo større tall gjør en større ramme.

Angi en tabellgrense er en god ide fordi du ikke kan stole på at nettlesere har samme standard. I tillegg er grenseverdien alltid i anførselstegn. Med CSS kan du legge til mer komplekse og interessante grenser enn dette enkle attributtet tillater.

Slik legger du til første rad

Når du har definert et bord, må du legge til noen rader. Hver rad er indikert av et par.

Innenfor settet trenger du noen tabelldata. Den første raden består ofte av tabelloverskrifter. Disse spesielle cellene er formatert annerledes for å indikere at de er etiketter, i stedet for data.

Tabelloverskrifter har noen standardformatering for å hjelpe deg med å huske at de er overskrifter, men du kan endre måten de ser ut. Du kan endre tabellhodens utseende på mange forskjellige måter. Definer tabelloverskriften, så når du oppdager formatering og bestemmer deg for å lage alle tabelloverskriftene dine, vil du vite hvor i HTML-koden alle tabelloverskriftene er.

Legg inn hodene dine inne i settet. Hvis tabellen inneholder tre kolonner, kan din første rad begynne slik:

Legg teksten du vil ha vist i tabelloverskriftene mellom elementene og elementene. Innholdet vises i den rekkefølgen de er definert.

Overskrifter trenger ikke å være på toppraden. Hvis du vil ha overskrifter til venstre, bare sett et par som det første elementet i hver rad. Du kan ha overskrifter på både toppen og venstre, hvis du vil. Faktisk kan du ha overskrifter hvor som helst, men det er vanligvis fornuftig å sette overskrifter bare øverst eller til venstre.

Slik lager du dine datarader

Det neste trinnet er å opprette en annen rad. Datarollene er akkurat som overskriften rad, bortsett fra at de bruker par, snarere enn par, for å inneholde dataelementene. Vanligvis har en tre-kolonne tabell tomme rader som ser slik ut:

Plasser dataelementene i segmentene, og du er klar til å gå.

Slik bygger du tabeller i tekstredigeringen

Noen mener at tabeller er en god grunn til å bruke WYSIWYG (det du ser er det du får) redaktører fordi de synes det er vanskelig å lage tabeller i tekstmodus. Du må planlegge litt, men det er egentlig ganske raskt og enkelt å bygge et HTML-bord uten grafiske verktøy hvis du følger denne planen:

Planlegge fremover.

Vet hvor mange rader og kolonner som skal ligge i tabellen. Sketching det på papir først kan være nyttig. Endre antall rader senere er enkelt, men endring av antall kolonner kan være en ekte smerte etter at noen av kodene er skrevet.
Opprett overskriftene.

Hvis du skal begynne med et standardoverskrift-på-bord, begynner du med å lage overskriftsruten. Lagre, sjekk og valider. Du vil ikke ha feil å multiplisere når du legger til mer kompleksitet. Denne overskriften rad forteller hvor mange kolonner du trenger.
Bygg en tom tomrute.

Lag en prøverad med det riktige antall elementer med ett par per linje. Bygg ett sett og bruk kopi og lim inn for å kopiere denne datacellen så mange ganger du trenger. Pass på at antall par er lik antall sett i overskriftsruten.
Kopier og lim inn den tomme raden for å lage så mange rader som du trenger.
Lagre, vis og valider.

Pass på at alt ser riktig ut og validerer riktig før du legger stor vekt på å legge til data.
Befolk bordet med dataene du trenger.

Gå rad for rad, legg til dataene mellom parene.
Test og valider igjen for å sikre at du ikke ved et uhell bryter noe.