Duomenų lentelėse stulpeliuose ir eilutėse pateikiama įvairi informacija, kad būtų lengviau ją perskaityti. Duomenys paprastai yra iš dalies skaitiniai su teksto etiketėmis. Pavyzdys yra duomenų lentelė, rodanti, kiek kalorijų kažkas suvalgo kiekvieną dieną. Duomenų lentelę internete galima padaryti naudojant HTML arba sudėtingesnę CSS naršyklės kalbą. Galutinė lentelė atrodo kaip duomenų lentelė, sukurta skaičiuoklėje arba popieriuje. Vienintelis skirtumas yra foninis kodavimas, kurio nematyti, nebent žiūrima į šaltinio kodą. Kodavimas gali būti sukurtas HTML redaktoriais, tekstu ar kitais būdais. Yra daugybė internetinių svetainių, kurios suteikia galimybę įvesti duomenis, nustatyti kelis atributus ir sukurti visą lentelės kodavimą. Internetinės duomenų lentelės paprastai naudojamos kaip tinklalapio dalis. Duomenų lentelės dažnai naudojamos kuriant prekių su kategorijomis sąrašus, pvz., Parduodamus daiktus. Kai kuriuose tinklalapiuose jie naudojami statistikos informacijai rodyti. Nors duomenų lenteles galima naudoti neprisijungus spausdinant arba ataskaitose, jas paprastai geriau naudoti skaičiuoklės programinė įranga, pvz., „Microsoft Office Excel“, kurios siūlo daug daugiau funkcijų darbui su duomenimis. Šiame vadove parodyta, kaip sukurti HTML duomenų lentelę naudojant „Notepad“.
Norėdami įvesti HTML kodą, atidarykite HTML redaktorių arba tiesiog paprastą „Notepad“ tekstinį dokumentą. „Notepad“ gerai veikia, jei esate įpratęs prie HTML kodavimo. HTML redaktoriai pasikartojančias užduotis atlieka greičiau, tačiau kai kurie, pvz., „Frontpage“, prideda nereikalingą kodavimą, kuris gali sulėtinti tinklalapių veikimą. Geriausia, ką reikia padaryti, tai pirmiausia koduoti HTML redaktoriumi, tada grįžti atgal ir redaguoti kodą ranka, kad jį išvalytumėte.
Nuspręskite kraštinės, pločio, fono ir šrifto spalvų lentelės atributus. Kad lentelė būtų lengvai skaitoma, turite atsižvelgti į tinklalapio išdėstymą, plotį, spalvas ir kitus atributus. Taip pat turite nuspręsti, kiek eilučių ir stulpelių reikia duomenims. Pradėkite apibrėžti lentelės atributus. (Mūsų pavyzdys rodo kiekvieną darbo dieną per pietus ir vakarienę suvalgytų kalorijų skaičių. Mums reikia trijų stulpelių (diena, pietūs ir vakarienė) ir septynių eilučių (dvi etiketėms ir po vieną kiekvienai darbo dienai).
Aplink lentelę ir duomenų langelius pridėkite kraštinę. Rėmeliai atskiria duomenis į langelius, kad būtų lengviau juos peržiūrėti. Jis matuojamas pikseliais ir jam gali būti suteikta 0 vertė, kad jų nenaudotumėte. Vieno ar dviejų taškų kraštinė paprastai yra tinkama. Kraštinės žymė yra
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Kraštinės spalvą galima pakeisti naudojant žymą
bordercolor = "CHOSEN_COLOR"
kurioje naudojami pagrindiniai spalvų terminai, tokie kaip raudona arba juoda arba šešiaženkliai šešioliktainiai spalvų kodai. Šešioliktainiai siūlo daugiau spalvų. Mūsų pavyzdyje naudojamas kraštas = "2" ir bordercolor = "juodas".
Nustatykite visos lentelės plotį. Jis matuojamas pikseliais arba ekrano dydžio procentais. Pikseliai yra galutiniai, o procentais lentelė gali prisitaikyti prie skirtingų ekrano dydžių. Pabandykite įvertinti plotį pagal duomenų plotį visose eilutėse. Jei vėliau sužinosite, kad stalas yra per plonas ar platus, jį galima pakeisti. Mūsų pavyzdyje naudojamas plotis = "175".
Nustatykite duomenų langelių fono spalvą. Ji skiriasi nuo puslapio fono spalvos, kuri gali suteikti gerą kontrastą. Žyma yra
bgcolor = "CHOSEN_COLOR"
kaip ir krašto spalva. Mūsų pavyzdyje naudojama bgcolor = "white".
Langeliuose nustatykite teksto šrifto spalvą. Įsitikinkite, kad spalva gerai kontrastuoja su fonu, todėl ji yra lengvai įskaitoma. Šviesa tamsoje arba tamsi šviesa visada veikia geriausiai. Žyma yra
font = "CHOSEN_COLOR"
Mūsų pavyzdys yra font = "black", kuris gerai kontrastuoja su baltu fonu.
Išrašykite visas lentelės žymas tarp kairės ir dešinės rodyklių su tarpu tarp žymos atributų ir pradėdami lentelės žymą priešais. Žymų tvarka neturi reikšmės, jei „stalas“ yra priekyje.
Nustatykite stulpelių pločius. Kiekvieno stulpelio plotis priklauso nuo visos lentelės pločio. Paimkite lentelės plotį ir padalykite ją iš langelių skaičiaus, kad gautumėte vienodo dydžio stulpelius. Jei reikia, sureguliuokite stulpelių pločius, tačiau bendras skaičius negali viršyti lentelės pločio. Kai vienos langelio plotis keičiasi, reikia koreguoti kitas langelius, kad lentelės plotis būtų bendras. (Mūsų pavyzdžio plotis yra 175 ir trys stulpeliai vienoje eilėje, taigi lygus padalijimas yra apie 59. Faktinis padalijimas yra 70, 60, 40.)
Pradėkite pridėti savo duomenis. Pirmiausia pradėkite naują eilutę ir pridėkite lentelės eilutę su kodu
Įveskite langelio duomenis; naudojant šį kodą tušti langeliai:
Uždarykite langelį su žyma. „Bordercolor“ žyma naudojama norint nurodyti langelio kraštinės spalvą. Jei jis nenurodomas, naudojama numatytoji lentelė „bordercolor“. Pirmasis mūsų pavyzdžio langelio kodas yra:
Kartokite lentelės duomenų langelių kūrimą kiekvienoje naujoje eilutėje, kol visi eilutės langeliai bus baigti. Tada baigkite eilutę su žyma. Kitą eilutę pradėkite tuo pačiu procesu, pradedant nuo
Uždarykite lentelės kodą naudodami žyma. Mūsų paskutinės lentelės kodas, jei jis baigsis po dviejų duomenų eilučių, yra žemiau.
Dalykai, kurių jums prireiks
- HTML redaktorius arba „Notepad“
- Duomenys