Datatabeller viser forskjellig informasjon i kolonner og rader for enkel lesing. Dataene er vanligvis delvis numeriske med tekstetiketter. Et eksempel er en datatabell som viser hvor mange kalorier noen spiser hver dag. Å lage en datatabell online kan gjøres med HTML eller det mer komplekse CSS-nettleserspråket. Den endelige tabellen ser ut som en datatabell opprettet i et regneark eller på papir. Den eneste forskjellen er bakgrunnskodingen, som ikke sees med mindre du ser på kildekoden. Kodingen kan opprettes av HTML-redaktører, tekst eller andre måter. Det er mange nettsteder på nettet som tilbyr muligheten til å legge inn data, angi noen attributter og lage hele tabellkodingen for deg. Online datatabeller brukes vanligvis som en del av en webside. Datatabeller brukes ofte til å lage lister over varer med kategorier, for eksempel varer til salgs. Noen websider bruker dem til å vise statistikk for informasjon. Mens datatabeller kan brukes offline for utskrift eller i rapporter, er det vanligvis bedre å bruke regnearkprogramvare, for eksempel Microsoft Office Excel, som tilbyr mange flere funksjoner for å jobbe med data. Denne guiden viser hvordan du lager en HTML-datatabell med Notisblokk.
Åpne en HTML-editor eller bare et vanlig Notepad-tekstdokument for å angi HTML-kode. Notisblokk fungerer bra hvis du er vant til HTML-koding. HTML-redaktører gjør gjentatte oppgaver raskere, men noen, som Frontpage, legger til ekstra unødvendig koding som kan redusere websidene. Det beste du kan gjøre er å kode med en HTML-editor først, og deretter gå tilbake og redigere koden for hånd for å rydde opp.
Bestem tabellattributtene for kant-, bredde-, bakgrunnsfarge og skriftfarger. Du må ta hensyn til websideoppsett, bredde, farger og andre attributter for å gjøre tabellen lett lesbar. Du må også bestemme hvor mange rader og kolonner som trengs for dataene. Begynn å definere tabellattributtene. (Eksemplet vårt viser antall kalorier spist til lunsj og middag hver ukedag. Vi trenger tre kolonner (dag, lunsj og middag) og syv rader (to for etiketter og en for hver ukedag).
Legg til en kant rundt tabellen og dataceller. Kanter skiller dataene i celler for enkel visning. Den måles i piksler og kan gis verdien 0 for ikke å bruke dem. En eller to piksler er generelt bra. Merkelappen for grensen er
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Kantfargen kan endres med taggen
bordercolor = "CHOSEN_COLOR"
som bruker grunnleggende fargebetegnelser, for eksempel rød eller svart eller sekssifrede heksadesimale fargekoder. Heksadesimaler tilbyr flere farger. Eksemplet vårt bruker border = "2" og bordercolor = "black".
Bestem bredden på hele bordet. Det måles i piksler eller prosent av skjermstørrelsen. Piksler er definitive, og prosentandelene gjør at tabellen kan justeres til forskjellige skjermstørrelser. Prøv å bedømme bredden basert på bredden på dataene over radene. Hvis du senere finner ut at bordet er for tynt eller bredt, kan det endres. Eksemplet vårt bruker bredde = "175".
Angi bakgrunnsfargen til datacellene. Det er annerledes enn bakgrunnsfargen på siden, noe som kan gi god kontrast. Merkelappen er
bgcolor = "CHOSEN_COLOR"
akkurat som kantfargen. Eksemplet vårt bruker bgcolor = "white".
Sett skriftfargen på teksten i cellene. Forsikre deg om at fargen står i kontrast til bakgrunnen, slik at den er lett å lese. Lys på mørkt eller mørkt på lys fungerer alltid best. Merkelappen er
font = "CHOSEN_COLOR"
Eksemplet vårt er font = "svart", som står i kontrast til den hvite bakgrunnen.
Skriv ut de komplette tabellkodene mellom venstre og høyre pil med et mellomrom mellom tagattributter og begynn med tabellkoden foran. Rekkefølgen på kodene spiller ingen rolle, så lenge "tabellen" er foran.
Bestem kolonnebreddene. Bredden på hver kolonne avhenger av bredden på hele tabellen. Ta tabellbredden og del den med antall celler for å få kolonner med jevn størrelse. Juster om nødvendig kolonnebreddene, men totalen kan ikke overstige tabellbredden. Når den ene cellebredden endres, må de andre cellene justeres for å oppnå total tabellbredde. (Eksemplet vårt har en bredde på 175 og tre kolonner per rad, så en jevn fordeling på omtrent 59. Den faktiske splittelsen er 70, 60, 40.)
Begynn å legge til dataene dine. Først begynner du en ny linje og legger til en tabellrad med koden
Skriv inn dataene dine for cellen; bruker denne koden for å representere tomme celler:
Lukk cellen med merkelappen. Bordfargemerken brukes til å spesifisere cellegrensefarge, hvis ønskelig. Hvis den blir utelatt, brukes standardtabellen bordfarge. Eksempelets første cellekode er:
Gjenta oppretting av tabelldataceller, hver på en ny linje, til alle celler i raden er fullført. Avslutt deretter raden med merkelappen. Begynn neste rad med samme prosess, og start med
Lukk tabellkoden med med stikkord. Vår endelige tabellkode, hvis den avsluttes etter to datarader, er nedenfor.
Ting du trenger
- HTML-editor eller Notisblokk
- Data