Dátové tabuľky obsahujú rôzne informácie v stĺpcoch a riadkoch, ktoré umožňujú ľahké čítanie. Údaje sú zvyčajne čiastočne číselné s textovými štítkami. Príkladom je dátová tabuľka, ktorá ukazuje, koľko kalórií niekto zje každý deň. Vytvorenie tabuľky údajov online je možné vykonať pomocou kódu HTML alebo zložitejšieho jazyka prehliadača CSS. Výsledná tabuľka vyzerá rovnako ako tabuľka údajov vytvorená v tabuľke alebo na papieri. Jediným rozdielom je kódovanie na pozadí, ktoré nie je vidieť, pokiaľ sa nepozeráte na zdrojový kód. Kódovanie je možné vytvoriť editormi HTML, textom alebo inými spôsobmi. Existuje veľa online stránok, ktoré ponúkajú možnosť zadávať údaje, nastavovať niekoľko atribútov a vytvárať pre vás všetko kódovanie tabuľky. Tabuľky údajov online sa zvyčajne používajú ako súčasť webovej stránky. Dátové tabuľky sa často používajú na vytváranie zoznamov položiek s kategóriami, ako sú napríklad položky na predaj. Niektoré webové stránky ich používajú na zobrazovanie štatistických informácií. Aj keď tabuľky s údajmi je možné použiť offline na tlač alebo v zostavách, zvyčajne je lepšie ich použiť tabuľkový softvér, napríklad Microsoft Office Excel, ktorý ponúka oveľa viac funkcií na prácu s údajmi. Táto príručka ukazuje, ako vytvoriť tabuľku údajov HTML pomocou programu Poznámkový blok.
Otvorte editor HTML alebo len obyčajný textový dokument v programe Poznámkový blok a zadajte kód HTML. Poznámkový blok funguje dobre, ak ste zvyknutí na kódovanie HTML. Redaktori HTML robia opakujúce sa úlohy rýchlejšie, ale niektoré, napríklad Frontpage, pridávajú ďalšie nepotrebné kódovanie, ktoré môže spomaliť fungovanie webových stránok. Najlepšie urobíte, ak najskôr kódujete pomocou editora HTML, potom sa vrátite späť a upravte kód ručne, aby ste ho vyčistili.
Rozhodnite o atribútoch tabuľky pre orámovanie, šírku, farbu pozadia a farby písma. Musíte vziať do úvahy rozloženie, šírku, farby a ďalšie atribúty webovej stránky, aby bola tabuľka ľahko čitateľná. Musíte sa tiež rozhodnúť, koľko riadkov a stĺpcov je potrebných pre údaje. Začnite definovať atribúty tabuľky. (Náš príklad ukazuje počet kalórií zjedených na obed a večeru každý pracovný deň. Potrebujeme tri stĺpce (Deň, Obed a Večera) a sedem riadkov (dva pre štítky a jeden pre každý pracovný deň).
Pridajte orámovanie okolo tabuľky a údajových buniek. Okraje oddeľujú údaje do buniek pre ľahké prezeranie. Meria sa v pixeloch a môže sa mu prideliť hodnota 0, aby sa nepoužívali. Jedno- alebo dvojpixelové ohraničenie je vo všeobecnosti v poriadku. Značka pre orámovanie je
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Farbu orámovania je možné zmeniť pomocou značky
bordercolor = "CHOSEN_COLOR"
ktorá využíva základné pojmy farieb, ako je červená alebo čierna alebo šesťmiestne hexadecimálne farebné kódy. Hexadecimálne čísla ponúkajú viac farieb. Náš príklad používa border = "2" a bordercolor = "black".
Určte šírku celej tabuľky. Meria sa v pixeloch alebo percentách veľkosti obrazovky. Pixely sú definitívne a percentuálne hodnoty umožňujú tabuľke prispôsobiť sa rôznym veľkostiam obrazovky. Pokúste sa posúdiť šírku na základe šírky údajov v riadkoch. Ak neskôr zistíte, že stôl je príliš tenký alebo široký, je možné ho zmeniť. Náš príklad používa width = "175".
Nastavte farbu pozadia dátových buniek. Líši sa od farby pozadia stránky, ktorá môže ponúknuť dobrý kontrast. Značka je
bgcolor = "CHOSEN_COLOR"
rovnako ako farba okraja. Náš príklad používa bgcolor = "biela".
Nastavte farbu písma textu v bunkách. Zaistite, aby farba dobre kontrastovala s pozadím, aby bola dobre čitateľná. Svetlo za tmy alebo tma za svetla funguje vždy najlepšie. Značka je
font = "CHOSEN_COLOR"
Náš príklad je font = "black", ktorý dobre kontrastuje s bielym pozadím.
Kompletné štítky tabuľky vypíšte medzi šípku doľava a doprava s medzerou medzi atribútmi značiek a začnite štítkom tabuľky pred. Na poradí značiek nezáleží, pokiaľ je „tabuľka“ vpredu.
Určte šírku stĺpca. Šírka každého stĺpca závisí od šírky celej tabuľky. Vezmite šírku tabuľky a vydeľte ju počtom buniek, aby ste získali rovnomerne veľké stĺpce. Ak je to potrebné, upravte šírky stĺpcov, ale celkový súčet nemôže prekročiť šírku tabuľky. Keď sa zmení šírka jednej bunky, je potrebné upraviť ďalšie bunky, aby sa celková šírka tabuľky zmenila. (Náš príklad má šírku 175 a tri stĺpce na riadok, teda rovnomerné rozdelenie asi 59. Skutočné rozdelenie je 70, 60, 40.)
Začnite pridávať svoje údaje. Najskôr začnite nový riadok a pridajte riadok tabuľky s kódom
Zadajte svoje údaje do bunky; pomocou tohto kódu predstavuje prázdne bunky:
Zatvorte bunku štítkom. Značka bordercolor sa používa na určenie farby orámovania bunky, ak je to požadované. Ak je vynechané, použije sa predvolená hraničná farba tabuľky. Prvý bunkový kód nášho príkladu je:
Opakujte vytváranie údajových buniek tabuľky, každý v novom riadku, kým nie sú všetky bunky v riadku úplné. Potom riadok ukončite štítkom. V ďalšom riadku začnite rovnakým procesom, začínajúc znakom
Zatvorte kód tabuľky pomocou značka. Náš konečný kód tabuľky, ak je ukončený po dvoch riadkoch údajov, je uvedený nižšie.
Veci, ktoré budete potrebovať
- HTML editor alebo Poznámkový blok
- Údaje