CSS Tutoriál VIII – Tabulky

V osmém díle se budeme více zabývat tabulkami – ať už slouží jako navigace nebo cokoli jiného. Jak nastavit výplň, styl buněk a další.

Začněme od základů – okrajů tabulky. Okraje nastavujeme vlastností border. Ta má opět mnoho nastavení – mezi nimi například border-color, border-width, border-style. Jakýkoli objekt u kterého nastavujeme tyto vlastnosti si představíme jako čtverec. Všechny objekty mají 4 strany, různé nastavení je tedy specifické. Abychom se neupsali, zapisujeme hodnoty do jedné vlastnosti (například border-width) . Vždy platí, že zápis hodnot je v tomto pořadí: top right bottom left. Pokud jsou hodnoty 3, je toto pořadí: top left and right bottom. Pokud jsou 2, je to: top and bottom left and right. Pokud je jedna, aplikuje se na všechny.

Border-color nastavuje barvu okraje, zadává se opět jako barva – hexadecimálně, jako rgb anebo slovy. Border-width nastavuje šířku okraje, kterou zapisujeme pomocí délkových jednotek. Také můžeme použít hodnoty thin, thick nebo medium.

Vlastností, která má ale velké množství hodnot je border-style. Ta nám určuje, jaký typ ohraničení použijeme. Základní hodnotou je solid, to je prostá plná linie. Tečkovaného ohraničení docílíme hodnotou dotted. Hodnotou dashed zase vyjádříme pomlčkovanou. Dvojitou čáru docílíme hodnotou double. Tyto základní čáry ještě doplňují 3D efektové čáry které mají hodnoty: groove, ridge, inset a outset. Se všemi jste se už jistě setkali v textových editorech nebo při práci s tabulkami. Hodnoty můžeme opět dát jiné pro všechny ohraničení:

div {border-style: dashed dotted double solid;}

Pro zaoblení hran objektu použijeme border-radius. Potom se hrany jeví kulatěji. Hodnotu zadáváme opět v délkových jednotkách a nebo procentech.

Pro jednotné okraje – pokud má totiž každá buňky vlastní okraj, vytvořili by se nám dva, použiváme vlastnost border-collapse: collapse

Můžeme také dát jako ohraničení obrázek. Ten nastavujeme pomocí vlastnosti border-image. Většinou se jedná o jednoduché obrázky, které dávají barevnější vzhled ne přímo tabulkám, ale třeba jednoduchým sekcím. Syntax pro nastavení obrázku je : border-image: source slice width outset repeat. Source – zdroj obrázku, slice – velikost obrázku, poměr, width – šířka, outset – jak moc přesahuje sekci k níž je přidělen, repeat – opakování obrázku. Můj osobní názor ale je, že to je příliš barevné a křiklavé a vlastně to vůbec nepotřebujeme.

Pro výplň pole tabulky a nebo jakéhokoliv prvku – sekce, nebo obdobně – používáme vlastnost padding. Ta nám určuje vzdálenost od okraje k obsahu. Je to jakoby vnitřní „vycpání“. Zapisujeme ho v délkových jednotkách, nejčastěji pixelech.

Jednotlivé velikosti buněk, řádků nebo celé tabulky nastavujeme vlastnostmi width a height. Jejich hodnotami jsou délkové jednotky a nebo procenta a označují nám šířku – width a výšku – height.

Zarovnání textu v tabulkce můžeme vyřešit jednak pomocí atributu text-align (left, right, center, justify (do bloku) ), který řeší horizontální zarovnání. A nebo pomocí vlastnosti vertical-align (top, middle, bottom) , která řeší zarovnání na výšku.

Vykreslování tabulky řešíme vlastností table-layout. Pokud je hodnota na výchozí pozici – auto, vykresluje se šířka sloupce podle nejširšího obsahu buňky, trvá to ovšem déle, než při hodnotě fixed, kdy se vykresluje šířka sloupce jenom podle šířky tabulky a na obsah se nebere ohled. Toto řešení je při načítání rychlejší, ale občas nám může tabulku při změně hodnot pokazit.

Barevné provedení tabulky řešíme vlastností background-color.