Sådan opretter du en datatabel Online

Datatabeller viser forskellige oplysninger i kolonner og rækker for nem læsning. Dataene er normalt delvist numeriske med tekstetiketter. Et eksempel er en datatabel, der viser, hvor mange kalorier nogen spiser hver dag. Oprettelse af en datatabel online kan udfø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 baggrundskodning, som ikke ses, medmindre man ser på kildekoden. Kodningen kan oprettes af HTML-redaktører, tekst eller andre måder. Der er mange sider online, der giver mulighed for at indtaste data, indstille et par attributter og oprette alle tabelkodning til dig. Online datatabeller bruges normalt som en del af en webside. Datatabeller bruges ofte til at oprette lister over varer med kategorier, f.eks. 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, f.eks. Microsoft Office Excel, der tilbyder mange flere funktioner til at arbejde med data. Denne vejledning viser, hvordan man opretter en HTML-datatabel med Notepad .

Åbn en HTML-editor eller bare et almindeligt notesblok-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 Forsiden, 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 med hånden for at rydde den op.


Bestem tabelattributterne for kant, bredde, baggrundsfarve og skrifttegenskaber. Du skal tage højde for websidens 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 skal bruges til dataene. Begynd med at definere tabelattributterne. (Vores eksempel viser antallet af kalorier, der spises 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 ugedag).


Tilføj en kant rundt bordet og dataceller. Kanter adskiller dataene i celler for nem visning. Det måles i pixels og kan gives en værdi på 0 for ikke at bruge dem. En kant- eller to-pixel kant er generelt fint. Tagget til grænsen er


Grænsefarven kan ændres med mærket


, der bruger de grundlæggende farvebetegnelser, såsom rød eller sort eller sekscifret hexadecimal farvekoder. Hexadecimals tilbyder flere farver. Vores eksempel bruger border \u003d "2" og bordercolor \u003d "black".


Bestem bredden af hele tabellen. Det måles i pixels eller procent af skærmstørrelsen. Pixels er definitive og procentdele giver tabellen mulighed for at justere til forskellige skærmstørrelser. Prøv at bedømme bredden baseret på bredden af data på tværs af rækkerne. Hvis du senere finder ud af, at tabellen er for tynd eller bredt, kan det ændres. Vores eksempel bruger bredde \u003d "175".


Indstil baggrundsfarven på datacellerne. Det er anderledes end baggrundsfarven på siden, hvilket kan give en god kontrast. Mærket er


ligesom kantfarve. Vores eksempel bruger bgcolor \u003d "hvid".


Indstil skriftfarve på teksten i cellerne. Sørg for, at farven kontrasterer godt med baggrunden, så den er let læsbar. Lys på mørke eller mørkt på lys fungerer altid bedst. Mærket er


Vores eksempel er font \u003d "sort", der kontrasterer godt med den hvide baggrund.


Skriv de komplette tabelltagger mellem en venstre og højre pil med et mellemrum mellem tagattributter og begynder med tabellen tag foran. Rækkefølgen af tags er ikke vigtig, så længe "tabel" er ude foran.


Bestem søjlebredderne. Bredden på hver søjle afhænger af bredden på hele tabellen. Tag tabelbredden, og del den med antallet af celler for at få jævne størrelser af kolonner. Juster om nødvendigt søjlebredderne, men det samlede beløb kan ikke overstige tabelbredden. Når den ene cellebredde ændres, skal de andre celler justeres til den samlede tabelbredde. (Vores eksempel har en bredde på 175 og tre kolonner pr. Række, så en jævn opdeling på ca. 59. Den faktiske opdeling er 70, 60, 40.)


Begynd at tilføje dine data. Begynd først med en ny linje og tilføj en tabelrække med koden . Tilføj derefter et tabeldatatag



Indtast dine data for cellen; ved hjælp af denne kode til at repræsentere tomme celler:


Luk cellen med tagget . Bordercolor-mærket bruges til at specificere cellekantfarve, hvis det ønskes. Hvis den udelades, bruges standardtabellen bordercolor. Vores eksempel's første cellekode er:


Gentag oprettelse af tabeldataceller, hver på en ny linje, indtil alle celler i rækken er komplette. Afslut derefter rækken med tagget . Begynd næste række med den samme proces, start med -tagget igen.


Luk bordkoden med mærket med . Vores sidste tabelkode, hvis den afsluttes efter to rækker med data, er nedenfor.