Pracujeme so štýlmi / 15. časť

V tohtomesačnom pokračovaní nášho seriálu sa budeme zaoberať tabuľkami vo vizuálnom formátovacom modeli, najmä tabuľkovými algoritmami a krajmi.

Tabuľky vo vizuálnom formátovacom modeli

Podľa vizuálneho formátovacieho modelu sa môže tabuľka správať ako blokový alebo riadkový element. Tabuľky majú obsah, odsadenie, okraj a kraj.

V obidvoch prípadoch element table vygeneruje anonymný kontajner, ktorý obsahuje kontajner tabuľky a kontajner titulku (ak existuje). Obidva tieto kontajnery si ponechajú svoj obsah, odsadenie, okraj aj kraj a rozmery obdĺžnikového anonymného kontajnera sú minimálne.

Pozícia a zarovnanie titulku

caption-side
Hodnota : top | bottom | left | right | inherit
Počiatočná : top
Vzťahuje sa na : elementy table-caption
Zdedená : áno
Percentá : N/A

Táto vlastnosť určuje pozíciu kontajnera titulku vzhľadom na kontajner tabuľky.

top
Umiestni kontajner titulku nad kontajner tabuľky.

bottom
Umiestni kontajner titulku pod kontajner tabuľky.

left
Umiestni kontajner titulku vľavo od kontajnera tabuľky.

right
Umiestni kontajner titulku vpravo od kontajnera tabuľky.

Titulky umiestnené nad alebo pod tabuľkou sú formatované ako blokové elementy pred alebo za tabuľkou, dedia však vlastnosti od tabuľky a nie sú považované za blokové kontajnery v prípade comopact alebo run-in elementov predchádzajúcich tabuľku.

Titulky umiestnené nad alebo pod tabuľku sa správajú ako blokové kontajnery v prípade výpočtu šírky, ich šírka je vypočítaná s ohľadom na šírku kontajnera obsahujúceho tabuľku.

V prípade titulkov umiestnených vľavo alebo vpravo od kontajnera tabuľky iná hodnota ako auto pre vlastnosť width udáva šírku explicitne, pri hodnote auto sa prehliadač snaží zvoliť najvýhodnejšiu šírku, ktorá sa môže pohybovať medzi šírkou najužšieho možného kontajnera a šírkou riadku, preto sa použitie tejto hodnoty neodporúča.

Pre zarovnanie obsahu titulku v kontajneri horizontálne je možné použiť vlastnosť text-align, pre vertikálne zarovnanie vlastnosť vertical-align.

Príklad:

Algoritmus šírky tabuľky

CSS nedefinuje žiadne striktné pravidlá, ktorými sa musí prehliadač riadiť pri vykresľovaní tabuľky. Ak teda nie je zvolený fixed layout algoritmus, prehliadač môže použiť ľubovoľný algoritmus a uprednostniť rýchlosť pred precíznosťou alebo naopak.

table-layout
Hodnota : auto | fixed | inherit
Počiatočná : auto
Vzťahuje sa na : tabuľkové a inline-table elementy
Zdedená : nie
Percentá : N/A
Média : vizuálne

Vlastnosť table-layout určuje algoritmus použitý pri vykresľovaní tabuľky:

auto
Použije sa ľubovoľný tabuľkový layout algoritmus.

fixed
Použije sa fixný layout algoritmus.

Fixný layout algoritmus

Pri použitý tohto rýchleho algoritmu horizontálny layout tabuľky nezávisí od obsahu buniek, závisí len od šírky tabuľky, šírky stĺpcov, krajov a rozostupov buniek.

Šírka tabuľky môže byť určená explicitne pomocou vlastnosti width. Použitie hodnoty auto automaticky znamená použitie automatického layout algoritmu.

Automatický layout algoritmus

Pri použití automatického layout algoritmu je šírka tabuľky určená šírkami jej stĺpcov. Tento algoritmus odráža správanie niektorých populárnych HTML prehliadačov, môže však byť neefektívny, pretože vyžaduje aby mal prehliadač prístup ku všetkým dátam tabuľky pred jej vykreslením.

Algoritmus výšky tabuľky

Výška tabuľky je určená vlastnosťou height. Ak je jej hodnota auto, šírka je vypočítaná ako súčet výšok stĺpcov plus rozostupy buniek alebo kraje. Ak je výška tabuľky zadaná explicitne, môže byť tabuľka vyššia alebo nižšia ako výška jej stĺpcov. CSS2 nešpecifikuje vykresľovanie tabuľky v prípade, že výška tabuľky sa líši od výšky jej obsahu.

Výška tabuľkových riadkových elementov je vypočítaná hneď ako sú prehliadaču k dispozícií všetky bunky v riadku.

Vertikálne umiestnenie každej bunky v rámci riadku je určené vlastnosťou vertical-align, ktorá môže nadobúdať nasledujúce hodnoty:

baseline
Základná čiara tabuľky je umiestnená do výšky základnej čiary prvého riadku, v ktorom sa bunka nachádza.

top
Vrch bunky je zarovnaný na úroveň prvého riadku, v ktorom sa bunka nachádza.

bottom
Spodok bunky je zarovnaný na spodok posledného riadku, v ktorom sa bunka nachádza.

middle
Stred bunky je zarovnaný na stred riadkov, v ktorých sa bunka nachádza.

sub, super, text-top, text-bottom
Tieto vlastnosti sa na bunky nevzťahujú, bunka je umiestnená ako pri hodnote baseline.

Horizontálne zarovnanie v stĺpci

Horizontálne zarovnanie obsahu bunky vnútri bunkového kontajnera určuje vlastnosť text-align. Ak je táto vlastnosť nastavená viacerým bunkám v stĺpci na hodnotu <string>, obsah týchto buniek je zarovnaný podľa vertikálnej osi. Použitie takéhoto zarovnávania má zmysel iba ak sa text bunky zmestí na jeden riadok.

Ak má vlastnosť text-align ako hodnotu textový reťazec, začiatok tohto textového reťazca sa dotýka vertikálnej osi. Ak sa zadaný reťazec v bunke nenachádza, dotýka sa vertikálnej osi koniec obsahu bunky.

Kraje

V CSS exitujú dva odlišné modely pre kraje tabuliek. Prvý model je vhodný na tzv. oddelené kraje okolo jednotlivých buniek, druhý na kraje, ktoré pokračujú z jedného konca tabuľky na druhý. Keďže väčšinu štýlov je možné dosiahnuť použitím obidvoch modelov, je voľba modelu väčšinou len otázkou vkusu.

border-collapse
Hodnota : <length> <length> | inherit
Počiatočná : 0
Vzťahuje sa na : tabuľkové a inline-table elementy
Zdedená : áno
Percentá : N/A
Média : vizuálne

Jednotlivé dĺžky (<length>) určujú vzdialenosť, ktorá oddeľuje kraje susedných buniek. Ak je špecifikovaná iba jedna dĺžka, udáva vertikálny aj horizontálny rozostup, v prípade špecifikácie obidvoch prvá udáva horizontálny rozostup a druhá vertikálny rozostup. Jednotlivé dĺžky nemôžu mať záporné hodnoty.

V tomto modeli má každá bunka vlastný kraj. Vzdialenosť medzi krajmi susedných buniek určuje vlastnosť border-spacing, voľné miesto je vyplnené pozadím tabuľky. Kraj nemôžu mať riadky, stĺpce, skupiny riadkov ani skupiny stĺpcov (prehliadač ich musí ignorovať).

Príklad:

V budúcom pokračovaní dokončíme tému tabuliek vo vizuálnom formátovacom modeli.