Datatabeller viser forskellige oplysninger i kolonner og rækker for nem læsning. Dataene er normalt delvis numeriske med tekstetiketter. Et eksempel er en datatabel, der viser, hvor mange kalorier nogen spiser hver dag. Oprettelse af en datatabel online kan gøres med HTML eller det mere komplekse CSS-browsersprog. Den endelige tabel ligner en datatabel oprettet i et regneark eller på papir. Den eneste forskel er baggrundskodningen, som ikke ses, medmindre man ser på kildekoden. Kodningen kan oprettes af HTML-redaktører, tekst eller andre måder. Der er mange websteder online, der tilbyder muligheden for at indtaste data, indstille et par attributter og oprette al tabelkodning til dig. Online datatabeller bruges normalt som en del af en webside. Datatabeller bruges ofte til at oprette lister over varer med kategorier, såsom varer til salg. Nogle websider bruger dem til at vise statistik til information. Mens datatabeller kan bruges offline til udskrivning eller i rapporter, er det normalt bedre at bruge regnearkssoftware, såsom Microsoft Office Excel, som tilbyder mange flere funktioner til arbejde med data. Denne vejledning viser, hvordan du opretter en HTML-datatabel med Notesblok.
Åbn en HTML-editor eller bare et almindeligt Notepad-tekstdokument for at indtaste HTML-kode. Notepad fungerer godt, hvis du er vant til HTML-kodning. HTML-redaktører gør gentagne opgaver hurtigere, men nogle, som Frontpage, tilføjer ekstra unødvendig kodning, der kan bremse websider. Den bedste ting at gøre er at kode med en HTML-editor først, derefter gå tilbage og redigere koden manuelt for at rydde op.
Bestem tabelattributterne for kant, bredde, baggrundsfarve og skrifttypefarver. Du skal tage højde for websides layout, bredde, farver og andre attributter for at gøre tabellen let læsbar. Du skal også beslutte, hvor mange rækker og kolonner, der er nødvendige for dataene. Begynd at definere tabelattributterne. (Vores eksempel viser antallet af kalorier, der er spist til frokost og middag hver hverdag. Vi har brug for tre kolonner (dag, frokost og middag) og syv rækker (to til etiketter og en til hver hverdag).
Tilføj en kant omkring tabellen og dataceller. Grænser adskiller dataene i celler for nem visning. Det måles i pixels og kan tildeles en værdi på 0 for ikke at bruge dem. En kant med en eller to pixels er generelt fint. Koden til grænsen er
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Kantfarven kan ændres med tagget
bordercolor = "CHOSEN_COLOR"
der bruger de grundlæggende farver, såsom rød eller sort eller sekscifrede hexadecimale farvekoder. Hexadecimals tilbyder flere farver. Vores eksempel bruger border = "2" og bordercolor = "sort".
Bestem bredden på hele bordet. Det måles i pixels eller procent af skærmstørrelsen. Pixler er endelige, og procenter giver tabellen mulighed for at justere til forskellige skærmstørrelser. Prøv at bedømme bredden ud fra bredden på dataene på tværs af rækkerne. Hvis du senere finder ud af, at bordet er for tyndt eller bredt, kan det ændres. Vores eksempel bruger bredde = "175".
Indstil datacellernes baggrundsfarve. Det er anderledes end sidens baggrundsfarve, som kan give god kontrast. Mærket er
bgcolor = "CHOSEN_COLOR"
ligesom kantfarven. Vores eksempel bruger bgcolor = "hvid".
Indstil skrifttypens farve i cellerne. Sørg for, at farven kontrasterer godt med baggrunden, så den er let at læse. Lys på mørkt eller mørkt på lys fungerer altid bedst. Mærket er
font = "CHOSEN_COLOR"
Vores eksempel er font = "sort", som står i kontrast til den hvide baggrund.
Skriv de komplette tabelmærker ud mellem en venstre og højre pil med et mellemrum mellem tagattributterne og begynd med tabellemærket foran. Rækkefølgen af tags betyder ikke noget, så længe "tabel" er foran.
Bestem søjlebredderne. Bredden på hver kolonne afhænger af bredden på hele tabellen. Tag tabelbredden og divider den med antallet af celler for at få kolonner med ens størrelse. Hvis det er nødvendigt, skal du justere kolonnebredderne, men det samlede antal kan ikke overstige tabelbredden. Når en cellebredde ændres, skal de andre celler justeres for at give total bordbredde. (Vores eksempel har en bredde på 175 og tre kolonner pr. Række, så en jævn opdeling på cirka 59. Den aktuelle opdeling er 70, 60, 40.)
Begynd at tilføje dine data. Start først en ny linje og tilføj en tabelrække med koden
Indtast dine data for cellen; ved hjælp af denne kode til at repræsentere tomme celler:
Luk cellen med mærket. Bordercolor-taggen bruges til at specificere cellekantfarven, hvis det ønskes. Hvis det udelades, bruges standardtabellen bordfarve. Vores eksemplets første cellekode er:
Gentag oprettelsen af tabeldataceller, hver på en ny linje, indtil alle celler i rækken er komplette. Afslut derefter rækken med mærket. Begynd den næste række med den samme proces, startende med
Luk bordkoden med med tag. Vores endelige tabel kode, hvis den afsluttes efter to rækker med data, er nedenfor.
Ting, du har brug for
- HTML-editor eller Notesblok
- Data