Andmetabelites on veergudes ja ridades loetletud mitmesugune teave hõlpsaks lugemiseks. Andmed on tavaliselt tekstisiltidega osaliselt numbrilised. Näide on andmetabel, mis näitab, kui palju kaloreid keegi päevas sööb. Andmetabeli võrgus tegemine on võimalik HTML-i või keerukama CSS-brauseri keelega. Lõplik tabel näeb välja täpselt nagu arvutustabelis või paberil loodud andmetabel. Ainus erinevus on taustkodeerimine, mida ei kuvata enne, kui lähtekoodi vaadata. Kodeerimise saab luua HTML-redaktorite, teksti või muul viisil. Internetis on palju saite, mis pakuvad võimalust sisestada andmeid, määrata mõned atribuudid ja luua kogu tabeli kodeerimine teie jaoks. Veebilehe osana kasutatakse tavaliselt veebiandmete tabeleid. Andmetabeleid kasutatakse sageli kategooriatega üksuste loendite loomiseks, näiteks müüdavate kaupade jaoks. Mõni veebileht kasutab seda teabe saamiseks statistika kuvamiseks. Kui andmetabeleid saab printimiseks või aruannetes võrguühenduseta kasutada, on neid tavaliselt parem kasutada arvutustabeli tarkvara, näiteks Microsoft Office Excel, mis pakub töötamiseks palju rohkem funktsioone andmetega. See juhend näitab, kuidas luua HTML-andmetabel koos Notepadiga.
HTML-koodi sisestamiseks avage HTML-redaktor või lihtsalt tavaline Notepadi tekstidokument. Märkmik töötab hästi, kui olete HTML-koodiga harjunud. HTML-i redigeerijad teevad korduvad toimingud kiiremini, kuid mõned, nagu ka Esileht, lisavad tarbetuid lisakodeeringuid, mis võivad veebilehtesid aeglasemaks muuta. Parim, mida teha, on kõigepealt kood HTML-redaktoriga, seejärel minge tagasi ja muutke koodi puhastamiseks käsitsi.
Otsustage tabeli atribuudid äärise, laiuse, taustavärvi ja fondivärvide jaoks. Tabeli hõlpsasti loetavaks muutmiseks peate arvestama veebilehe paigutuse, laiuse, värvide ja muude atribuutidega. Samuti peate otsustama, mitu rida ja veergu on andmete jaoks vaja. Alustage tabeli atribuutide määratlemist. (Meie näide näitab igal nädalapäeval lõuna- ja õhtusöögi ajal söödud kalorite arvu. Vajame kolme veergu (päev, lõunasöök ja õhtusöök) ja seitset rida (kaks siltide jaoks ja üks igaks argipäevaks).
Lisage tabeli ja andmeelementide ümber ääris. Äärised eraldavad andmed lahtriteks, et neid oleks hõlbus vaadata. Seda mõõdetakse pikslites ja selle mittekasutamiseks võib anda väärtuse 0. Ühe või kahe piksli piir on üldiselt hea. Äärise silt on
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Äärise värvi saab märgendiga muuta
bordercolor = "CHOSEN_COLOR"
mis kasutab põhivärvide termineid, näiteks punane või must või kuuekohaline kuueteistkümnendsüsteemis värvikood. Kuueteistkümnendikud pakuvad rohkem värve. Meie näites kasutatakse piiri = "2" ja bordercolor = "must".
Määrake kogu laua laius. Seda mõõdetakse pikslites või protsentides ekraani suurusest. Pikslid on lõplikud ja protsendid võimaldavad tabelit kohandada vastavalt erinevatele ekraanisuurustele. Püüdke laiust hinnata ridade andmete laiuse põhjal. Kui leiate hiljem, et laud on liiga õhuke või lai, saab seda muuta. Meie näites kasutatakse laiust = "175".
Määrake andmerakkude taustavärv. See erineb lehe taustavärvist, mis võib pakkuda head kontrasti. Silt on
bgcolor = "CHOSEN_COLOR"
täpselt nagu äärevärv. Meie näites kasutatakse bgcolor = "white".
Määrake lahtrites teksti fondivärv. Veenduge, et värv oleks taustaga hästi kontrastne, nii et see oleks hõlpsasti loetav. Valgus pimedas või pime valguses töötab alati kõige paremini. Silt on
font = "CHOSEN_COLOR"
Meie näide on font = "black", mis kontrastib hästi valget tausta.
Kirjutage täielikud tabelisildid välja vasaku ja parema noole vahele tühiku abil siltide atribuutide vahel ja alustades tabelisildiga ees. Siltide järjestus pole oluline, kui "tabel" on väljas.
Määrake veeru laiused. Iga veeru laius sõltub kogu tabeli laiusest. Võrdse suurusega veergude saamiseks võtke tabeli laius ja jagage see lahtrite arvuga. Vajadusel reguleerige veeru laiusi, kuid koguarv ei tohi ületada tabeli laiust. Kui ühe lahtri laius muutub, tuleb teisi lahtreid tabeli laiuseks kokku reguleerida. (Meie näite laius on 175 ja kolm veergu reas, seega ühtlane poolitus on umbes 59. Tegelik jaotus on 70, 60, 40.)
Alustage oma andmete lisamist. Kõigepealt alustage uut rida ja lisage tabelirida koodiga
Sisestage oma andmed lahtrisse; selle koodi kasutamine tühjade lahtrite tähistamiseks:
Sulgege lahter märgendiga. Bordercolor silti kasutatakse soovi korral lahtri piiri värvi määramiseks. Kui see välja jätta, kasutatakse vaikelauda bordercolor. Meie näite esimene lahtrikood on:
Korrake tabeli andmerakkude loomist, igaüks uuel real, kuni kõik rea lahtrid on valmis. Seejärel lõpetage rida märgendiga. Alustage järgmist rida sama protsessiga, alustades tähega
Sulgege tabeli kood tähisega silt. Meie lõpliku tabeli kood, kui see lõpeb pärast kahte andmerida, on allpool.
Asjad, mida vajate
- HTML-redaktor või märkmik
- Andmed