Podatkovne tabele vsebujejo različne informacije v stolpcih in vrsticah za lažje branje. Podatki so običajno delno številčni z besedilnimi nalepkami. Primer je podatkovna tabela, ki prikazuje, koliko kalorij nekdo poje vsak dan. Izdelava podatkovne tabele v spletu je možna z uporabo HTML-ja ali bolj zapletenega jezika brskalnika CSS. Končna tabela je videti kot podatkovna tabela, ustvarjena v preglednici ali na papirju. Edina razlika je v kodiranju v ozadju, ki ga ni mogoče videti, razen če pogledamo izvorno kodo. Kodiranje lahko ustvarijo urejevalniki HTML, besedilo ali drugi načini. V spletu je veliko spletnih mest, ki ponujajo možnost vnosa podatkov, nastavitve nekaj atributov in ustvarjanja celotnega kodiranja tabele. Spletne tabele podatkov se običajno uporabljajo kot del spletne strani. Podatkovne tabele se pogosto uporabljajo za ustvarjanje seznamov predmetov s kategorijami, na primer predmetov za prodajo. Nekatere spletne strani jih uporabljajo za prikaz statističnih podatkov. Podatkovne tabele lahko sicer uporabljate brez povezave za tiskanje ali poročila, vendar je običajno bolje, da jih uporabite programska oprema za preglednice, kot je Microsoft Office Excel, ki ponuja veliko več funkcij za delo s podatki. Ta priročnik prikazuje, kako ustvarite tabelo podatkov HTML s programom Notepad.
Za vnos kode HTML odprite urejevalnik HTML ali samo navaden besedilni dokument Beležnice. Beležnica dobro deluje, če ste vajeni kodiranja HTML. Urejevalniki HTML pospešijo ponavljajoča se opravila, nekateri pa, na primer Frontpage, dodajo dodatno, nepotrebno kodiranje, ki lahko upočasni delovanje spletnih strani. Najbolje je, da najprej kodirate z urejevalnikom HTML, nato se vrnete in ročno uredite kodo, da jo očistite.
Določite atribute tabele za obrobo, širino, barvo ozadja in barve pisave. Upoštevati morate postavitev spletne strani, širino, barve in druge atribute, da bo tabela lahko berljiva. Odločiti se morate tudi o tem, koliko vrstic in stolpcev je potrebnih za podatke. Začnite definirati atribute tabele. (Naš primer prikazuje število zaužitih kalorij za kosilo in večerjo vsak delovni dan. Potrebujemo tri stolpce (dan, kosilo in večerja) in sedem vrstic (dve za nalepke in eno za vsak delovni dan).
Dodajte obrobo okoli tabele in podatkovnih celic. Meje ločujejo podatke v celice za lažji ogled. Izmeri se v slikovnih pikah in lahko dobi vrednost 0, če jih ne uporabljate. Meja z eno ali dvema slikovnima pikama je na splošno v redu. Oznaka za obrobo je
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Barvo obrobe lahko spremenite z oznako
bordercolor = "CHOSEN_COLOR"
ki uporablja osnovne barvne izraze, kot so rdeča ali črna ali šestmestna šestnajstiška barvna koda. Heksadecimalci ponujajo več barv. Naš primer uporablja border = "2" in bordercolor = "black".
Določite širino celotne tabele. Izmeri se v slikovnih pikah ali odstotkih velikosti zaslona. Piksli so dokončni, odstotki pa omogočajo, da se tabela prilagodi različnim velikostim zaslona. Poskusite presoditi širino glede na širino podatkov v vrsticah. Če kasneje ugotovite, da je miza pretanka ali široka, jo lahko spremenite. Naš primer uporablja širino = "175".
Nastavite barvo ozadja podatkovnih celic. Je drugačna od barve ozadja strani, ki lahko nudi dober kontrast. Oznaka je
bgcolor = "CHOSEN_COLOR"
tako kot barva obrobe. Naš primer uporablja bgcolor = "white".
Nastavite barvo pisave besedila v celicah. Prepričajte se, da je barva dobro v nasprotju z ozadjem, tako da je lahko berljiva. Svetloba na temi ali tema na svetlobi vedno deluje najbolje. Oznaka je
font = "CHOSEN_COLOR"
Naš primer je font = "black", ki je v dobrem nasprotju z belim ozadjem.
Zapišite celotne oznake tabele med puščico levo in desno s presledkom med atributi oznak in začnite z oznako tabele spredaj. Vrstni red oznak ni pomemben, če je "tabela" spredaj.
Določite širine stolpcev. Širina vsakega stolpca je odvisna od širine celotne tabele. Vzemite širino tabele in jo delite s številom celic, da dobite enakomerno velike stolpce. Po potrebi prilagodite širine stolpcev, vendar skupna vrednost ne sme presegati širine tabele. Ko se ena širina celice spremeni, je treba druge celice prilagoditi tako, da seštejejo širino tabele. (Naš primer ima širino 175 in tri stolpce na vrstico, torej enakomerno delitev približno 59. Dejanska delitev je 70, 60, 40.)
Začnite dodajati svoje podatke. Najprej začnite novo vrstico in dodajte vrstico tabele s kodo
Vnesite svoje podatke za celico; uporaba te kode za predstavitev praznih celic:
Zaprite celico z oznako. Oznaka bordercolor se po potrebi uporablja za določitev barve obrobe celice. Če je izpuščena, se uporablja privzeta meja barv tabele. Prva celična koda našega primera je:
Ponavljajte ustvarjanje celic s podatki tabele, vsako v novi vrstici, dokler niso zaključene vse celice v vrstici. Nato vrstico zaključite z oznako. Naslednjo vrstico začnite z istim postopkom, začenši z
Kodo tabele zaprite s tipko oznaka. Naša koda končne tabele, če se konča po dveh vrsticah podatkov, je spodaj.
Stvari, ki jih boste potrebovali
- Urejevalnik HTML ali beležnica
- Podatki