Datové tabulky obsahují různé informace ve sloupcích a řádcích pro snadné čtení. Data jsou obvykle částečně číselná s textovými štítky. Příkladem je datová tabulka, která ukazuje, kolik kalorií někdo každý den sní. Vytvoření datové tabulky online lze provést pomocí HTML nebo složitějšího jazyka prohlížeče CSS. Finální tabulka vypadá stejně jako tabulka dat vytvořená v tabulce nebo na papíře. Jediným rozdílem je kódování na pozadí, které není vidět, pokud se nedíváme na zdrojový kód. Kódování může být vytvořeno editory HTML, textem nebo jinými způsoby. Existuje mnoho webů online, které nabízejí možnost zadávat data, nastavit několik atributů a vytvořit pro vás veškeré kódování tabulky. Tabulky dat online se obvykle používají jako součást webové stránky. Datové tabulky se často používají k vytváření seznamů položek s kategoriemi, jako jsou položky na prodej. Některé webové stránky je používají k zobrazování statistických údajů. Zatímco datové tabulky lze použít offline pro tisk nebo v sestavách, je obvykle lepší je použít tabulkový software, jako je Microsoft Office Excel, který nabízí mnohem více funkcí pro práci s daty. Tato příručka ukazuje, jak vytvořit tabulku dat HTML pomocí programu Poznámkový blok.
Otevřete editor HTML nebo běžný textový dokument Poznámkového bloku a zadejte kód HTML. Poznámkový blok funguje dobře, pokud jste zvyklí na kódování HTML. Editory HTML zrychlují opakující se úkoly, ale některé, například Frontpage, přidávají další nepotřebné kódování, které může zpomalit webové stránky. Nejlépe uděláte nejprve kód pomocí editoru HTML, poté se vraťte zpět a ručně jej upravte, abyste jej vyčistili.
Určete atributy tabulky pro ohraničení, šířku, barvu pozadí a barvy písma. Musíte vzít v úvahu rozložení, šířku, barvy a další atributy webové stránky, aby byla tabulka snadno čitelná. Musíte se také rozhodnout, kolik řádků a sloupců je pro data potřeba. Začněte definovat atributy tabulky. (Náš příklad ukazuje počet kalorií přijatých na oběd a večeři každý pracovní den. Potřebujeme tři sloupce (Den, Oběd a Večeře) a sedm řádků (dva pro štítky a jeden pro každý den v týdnu).
Přidejte ohraničení kolem tabulky a datových buněk. Hranice oddělují data do buněk pro snadné prohlížení. Měří se v pixelech a lze mu dát hodnotu 0, aby se nepoužíval. Okraj s jedním nebo dvěma pixely je obecně v pořádku. Značka ohraničení je
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Barvu ohraničení lze změnit pomocí značky
bordercolor = "CHOSEN_COLOR"
který využívá základní pojmy barev, jako je červená nebo černá nebo šestimístné hexadecimální barevné kódy. Šestnáctková čísla nabízejí více barev. Náš příklad používá border = "2" a bordercolor = "black".
Určete šířku celé tabulky. Měří se v pixelech nebo procentech velikosti obrazovky. Pixely jsou definitivní a procenta umožňují tabulce přizpůsobit se různým velikostem obrazovky. Zkuste posoudit šířku na základě šířky dat napříč řádky. Pokud později zjistíte, že je stůl příliš tenký nebo široký, lze jej změnit. Náš příklad používá width = "175".
Nastavte barvu pozadí datových buněk. Liší se od barvy pozadí stránky, která může nabídnout dobrý kontrast. Značka je
bgcolor = "CHOSEN_COLOR"
stejně jako barva okraje. Náš příklad používá bgcolor = "white".
Nastavte barvu písma textu v buňkách. Zajistěte, aby barva dobře kontrastovala s pozadím, aby byla snadno čitelná. Světlo za tmy nebo tma za světla funguje vždy nejlépe. Značka je
font = "CHOSEN_COLOR"
Náš příklad je font = "black", který dobře kontrastuje s bílým pozadím.
Vypište kompletní tagy tabulky mezi levou a pravou šipku s mezerou mezi atributy tagu a začněte tagem tabulky vpředu. Na pořadí značek nezáleží, pokud je „tabulka“ vpředu.
Určete šířku sloupce. Šířka každého sloupce závisí na šířce celé tabulky. Vezměte šířku tabulky a vydělte ji počtem buněk, abyste získali rovnoměrně velké sloupce. Je-li to nutné, upravte šířku sloupce, ale součet nemůže překročit šířku tabulky. Když se změní šířka jedné buňky, je třeba upravit další buňky tak, aby celková šířka tabulky byla. (Náš příklad má šířku 175 a tři sloupce na řádek, takže rovnoměrné rozdělení asi 59. Skutečné rozdělení je 70, 60, 40.)
Začněte přidávat svá data. Nejprve začněte nový řádek a přidejte řádek tabulky s kódem
Zadejte své údaje do buňky; pomocí tohoto kódu představují prázdné buňky:
Zavřete buňku pomocí značky. Značka bordercolor se používá k určení barvy ohraničení buňky, pokud je to požadováno. Pokud je vynecháno, použije se výchozí barva tabulky. První buněčný kód našeho příkladu je:
Opakujte vytváření datových buněk tabulky, každý na novém řádku, dokud nejsou všechny buňky v řádku úplné. Poté řádek ukončete značkou. Další řádek začněte stejným procesem, počínaje
Zavřete kód tabulky pomocí s štítek. Náš kód konečné tabulky, je-li ukončen po dvou řádcích dat, je uveden níže.
Věci, které budete potřebovat
- HTML editor nebo Poznámkový blok
- Data