HTML tabulky jsou základem strukturovaných dat na webu. Už se nepoužívají jen na tabulky. Můžete změnit jejich tvar, barvu a přesně ovládat, jak se zobrazí v okně prohlížeče. Stará osvědčená metoda spoléhá na specifické atributy prezentace. Funguje to. Je to jednoduché a přehledné. K získání slušného rozvržení nepotřebujete složité frameworky CSS.
Změna barvy pozadí tabulky
Začněte s celkovým pohledem. Chcete, aby vynikla celá síťovina? Nepotřebujete samostatnou šablonu stylů. Stačí přidat atribut bgcolor do úvodní značky
.
Příklad:
Tím je připravena scéna. Každá buňka zdědí tento styl, pokud jej nepřepíšete.
Můžete také provrtat. Vybarvěte jednotlivý řádek nebo konkrétní buňku. Přidejte bgcolor="color" do značky
nebo
| .
Příklad:
|
To je malý detail. Ale mění způsob, jakým oko vnímá data.
Velikost stolu
Prohlížeče jsou ve výchozím nastavení líné. Rozšiřují řádky a sloupce, aby se přizpůsobily obsahu. Pokud jsou vaše data krátká, tabulka se roztáhne, aby zaplnila okno. Pokud jsou data dlouhá, tabulka bude dlouhá.
Někdy potřebujete kontrolu. Chcete pevné velikosti.
Přidejte width a height do počáteční značky
. Můžete použít pixely nebo procenta.
Příklad: <šířka tabulky=300 výška=400>
Pixely poskytují přísná omezení. Procenta umožňují, aby se tabulka přizpůsobila velikosti výřezu. Kterou možnost si vyberete, závisí na vašich cílech návrhu.
Můžete také nastavit rozměry pro jednotlivé buňky. Přidejte width="value" ke značce
nebo
| . Toto přepíše globální nastavení specifické pro umístění.
Experimentovat. Zkuste hodnotu pixelu. Pak zkuste procentuální hodnotu. Podívejte se, jak to funguje nebo se přerušuje na různých obrazovkách.
Vnitřní polstrování (Cellpadding)
Prostor je součástí designu. Konkrétně prostor mezi okrajem buňky a textem uvnitř buňky.
Toto je „vycpávka buněk“. Nabývá hodnoty v pixelech.
Použijte jej v počáteční značce
.
Příklad 1:
Příklad 2:
Pět pixelů je málo. Patnáctka je prostorná. Obsah působí jinak. Vypadá čistěji s větším odsazením.
Externí odsazení (Cellspacing)
Pak je mezi buňkami mezera.
Toto je ‘vzdálenost buněk’. Přijímá také hodnotu v pixelech.
Přidejte jej do značky
.
Příklad 1:
Příklad 2:
Malý ‘buňkový rozestup’ dělá síť těsnější. Velké cellspacing vytváří vzhled podobný seznamu úkolů.
Záhlaví tabulek
Struktura datových potřeb. Tuto strukturu poskytují nadpisy.
Chcete-li zvýraznit sloupec nebo řádek jako záhlaví, nahraďte „
“ na prvním řádku „
| “.
Text bude automaticky tučný a vycentrovaný.
Příklad:
| Sloupec 1 |
Sloupec 2 |
| A |
B |
| C |
| | |
