Cíle

Vlastnosti seznamů

Typ seznamu

Je definován vlastností list-style-type.

Umožňuje nastavit typ značky, která uvozuje jednotlivé položky seznamu. Značky lze rozdělit do tří kategorií. Odrážky, čísla, písmena.

Odrážky

Používají se pro netříděné seznamy.

Jako hodnotu lze použít následující klíčová slova:

disc - kruh (výchozí hodnota pro netříděný seznam),

circle - kružnici,

square - čtverec.

Čísla

Používají se pro tříděné seznamy.

Jako hodnotu lze použít následující klíčová slova:

decimal - arabská čísla (1., 2., 3., ...) - výchozí hodnota pro tříděný seznam,

lower-roman - malá římská čísla (i., ii., iii., ...),

upper-roman - velká římská čísla (I., II., III., ...).

Obrázky odrážek

Jsou definovány vlastností list-style-image.

Tato vlastnost nahradí odrážku libovolným obrázkem. Jako hodnotu této vlastnosti zadáváme adresu obrázku (viz. studijní článek Hodnoty). Výchozí hodnotou je none. Pokud je použita hodnota none, či není obrázek nalezen, prohlížeč zobrazí značku definovanou pomocí list-style-type.

Přehled možných seznamů nalezneme v ukázce .

Také si v ní můžeme prohlédnout, jak lze formátovat odrážky víceúrovňového seznam. Provedeme to pomocí selektorů zapsaných v kontextu ul ul a ul ul ul. Pravidlo se selektorem ul ul formátuje jen položky toho seznamu, který je uvnitř jiného seznamu. Tzn. položky druhé úrovně. Pravidlo se selektorem ul ul ul funguje obdobně. Formátuje jen položky toho seznamu, který je uvnitř jiného seznamu, jenž je také uvnitř jiného seznamu. Což jsou položky třetí úrovně. Analogicky si můžete vytvořit i selektory pro další úrovně.

Pro odrážku realizovanou obrázkem je použit symbol odrazka.png.

Umístění značek

Je definováno vlastností list-style-position.

Určuje, zda budou značky (odrážky nebo čísla) zobrazeny jako součást položek, či zda boudou předsazeny před položkami.

Hodnotami jsou klíčová slova:

outside - předsazení značek před položky (výchozí hodnota),

inside - zobrazení jako součást položky.

Toto formátování má význam v případě, že je text položky zalamován na další řádku.

Rozdíl v umístění značek můžete vidět v ukázce .

Sdružená vlastnost seznamu

Je definována vlastností list-style.

Umožňuje nastavení všech vlastností seznamů najednou.

Jejími hodnotami jsou hodnoty vlastností:

list-style-type,

list-style-image,

list-style-position.

Hodnoty lze zadávat v libovolném pořadí. Je možné zadat všechny nebo jen některé hodnoty. U vlastností, jejichž hodnoty nebyly zadány, budou použity výchozí hodnoty.

V ukázce je za pomoci vlastnosti list-style definováno pravidlo pro netříděný seznam ul. Toto pravidlo říká, že budou odrážky vyobrazeny v podobě obrázku "odrazka.png". Nebude-li obrázek k dispozici, bude použita odrážka ve tvaru kružnice. V obou případech pak budou odrážky zobrazeny jako součást položek.

Vlastnosti tabulek

Typ formátování

Je definován vlastností table-layout.

Tato vlastnost určuje, jakým způsobem bude tabulka formátována.

Na výběr je ze dvou modelů, podle kterých se bude formátování řídit:

Automatický - hodnota auto (výchozí hodnota).

Fixní - hodnota fixed.

Oba tyto modely se řídí následujícími zásadami:

• Nemá-li tabulka nastavenu šířku pomocí vlastnosti width, roztahuje se dle obsahu buněk (viz. Tabulka t1 v ukázce ). Maximálně však do šířky omezujícího bloku. Dosáhne-li šířka tabulky omezujícího bloku, obsah buněk se zalamuje (viz. Tabulka t2 v ukázce ). Co je to omezující blok, se dozvíte ve studijním článku Vlastnosti rámů. Prozatím si tento pojem můžete ztotožnit s šířkou okna, ve kterém se tabulka zobrazuje. Vlastnost width si rovněž podrobněji popíšeme ve studijním článku Vlastnosti rámů.
• Není-li nastavena šířka tabulky a zároveň je nastavena šířka sloupců, pak šířka tabulky odpovídá součtu šířek sloupců (viz. Tabulka t3 v ukázce ). Šířka tabulky však nepřekročí šířku omezujícího bloku. Je-li šířka nastavena jen u některých sloupců, pak tyto zalamují svůj obsah dle zadané šířky. Ostatní sloupce roztahují svou šířku úměrně obsahu svých buněk (viz. Tabulka t4 v ukázce ).
• Šířku sloupce určuje nejširší buňka ve sloupci. Proto chceme-li nastavit některému sloupci pevnou šířku, stačí přidat atribut class jen k první buňce sloupce (např. <th class="pevna_sirka">). Šířku tohoto sloupce potom nastavíme pravidlem th.pevna_sirka { width: 250px } viz. Tabulka t4 v ukázce .

Automatický

Přizpůsobuje šířku buněk jejich obsahu.

Tabulku formátuje podle následujících zásad:

• Je-li šířka tabulky nastavena větší, než je celková šířka obsahu buněk, pak se jednotlivé sloupce roztáhnou úměrně obsahu svých buněk - viz. Tabulka t5 v ukázce .
• Je-li šířka tabulky nastavena menší, než je celková šířka obsahu buněk, pak se jednotlivé sloupce zúží úměrně obsahu svých buněk (obsah buněk bude zalomen) - viz. Tabulka t6 v ukázce .
• Je-li nastavená šířka tabulky tak malá, že by se do sloupců nevešla některá slova, pak se sloupce přizpůsobí - viz. Tabulka t7 v ukázce .

Fixní

Nebere ohled na obsah buněk.

Řídí se výhradně nastavenou šířkou tabulky. Není-li nastavena šířka tabulky, chová se jako model Automatický.

Tabulku formátuje podle následujících zásad:

• Je-li šířka tabulky nastavena větší, než je celková šířka obsahu buněk, pak se jednotlivé sloupce rovnoměrně roztáhnou - viz. Tabulka t8 v ukázce .
• Je-li šířka tabulky nastavena menší, než je celková šířka obsahu buněk, pak se jednotlivé sloupce rovnoměrně zúží (obsah buněk bude zalomen) - viz. Tabulka t9 v ukázce .
• Je-li nastavená šířka tabulky tak malá, že se do sloupců nevejdou některá slova, pak tato slovo přetečou (viz. vlastnost overflow ve studijním článku Vlastnosti zobrazení) - Tabulka t10 v ukázce .

V ukázce najdete 10 tabulek, na kterých jsou demonstrovány výše popsané zásady. Pro větší přehlednost byla každá tabulka doplněna o atribut třídy class="t1 až t10". Proto jsou také některé selektory zapsány v kontextu (table.t3 a table.t4).

V ukázce si povšimněte zejména rozdílů mezi tabulkami t5 a t8, t6 a t9, t7 a t10. Tyto dvojice tabulek názorně ukazují rozdíly mezi automatickým a fixním modelem.

Sloučení rámů buněk

Je definováno vlastností table-layout.

Určuje, zda budou rámečky buněk zobrazeny:

oddělené - hodnota separate (výchozí hodnota),

sloučené - hodnota collapse.

V prvním případě má každá buňka svůj vlastní rámeček, zatímco v tom druhém jej má společný se sousedními buňkami. Této skutečnosti se dá využít například při stínování buněk tabulky, či jiném formátování rámů. Více se dozvíte ve studijním článku Vlastnosti rámů.

Prozatím můžete porovnat vzhled obou variant v ukázce .

Odstup mezi rámy buněk

Je definován vlastností border-spacing.

Máme-li nastaveno oddělené zobrazení buněk pomocí definice border-collapse: separate, můžeme nastavit odstup mezi rámy buněk. Toho dosáhneme za pomoci vlastnosti border-spacing. Hodnotou budiž rozměr v libovolných jednotkách (vyjma %).

K dispozici máme dva možné formáty definice:

border-spacing: odstup,

border-spacing: odstup_horizontálně odstup_vertikálně.

Zadáme-li například pravidlo table { border-spacing: 6px }, bude mít tabulka odstup mezi rámy všech buněk 5 pixelů. Pravidlo table { border-spacing: 14px 7px } nastaví horizontální odstup mezi buňkami na 14 pixelů a vertikální odstup mezi buňkami na 7 pixelů.

Viz. ukázka .

Zobrazení prázdných buněk

Je definováno vlastností empty-cells.

Umožňuje skrýt prázdné buňky včetně jejich orámování. Projeví se pouze, jsou-li rámy buněk zobrazeny odděleně (border-collapse: separate). Za prázdnou buňku se zde považuje taková, která neobsahuje žádný znak, popř. obsahuje jen mezery, či tabelátory.

Možnými hodnotami jsou klíčová slova:

show - prázdné buňky se zobrazují (výchozí hodnota),

hide - prázdné buňky se nezobrazují.

Jak se nastavení této vlastnosti projevuje můžete vidět v ukázce .

Tip: Připíšete-li do XHTML kódu prázdných buněk nějaké znaky, objeví se po spuštění náhledu obsah buňky i s jejím orámováním.