Štýly tabuliek

Na zmenu zoznamu tried použitých na definovanie štýlu tabuľky alebo jej časti slúži direktíva so syntaxou v tvare #«typ zoznamu»:«zoznam tried», napríklad:

#tables:blocks

(Zoznam tried je zoznamom identifikátorov tried štýlov oddeľovaných medzerami. Samozrejme, že zoznam smie obsahovať jedinú položku.)

 

V zozname nižšie sú vymenované direktívy rôznych typov zoznamov slúžiacich na ovplyvňovanie štýlov rôznych častí tabuliek. Po ich vyskytnutí sa v zdrojovom texte sú všetky, okrem direktívy table, platné až do odvolania v rámci jednej stránky alebo definície článku. Ich platnosť sa dá odvolať uvedením prázneho zoznamu tried. Napríklad:

#tables:

Tu je zoznam všetkých typov zoznamov tried štýlov dostupných pre tabuľky s uvedením stručného slovného opisu toho, akú časť tabuľky jednotlivý typ zoznamu ovplyvní:

tables	–	celé tabuľky (predvolená trieda štýlu tabuľky je shaded, ďalšie dostupné triedy sú vymenované nižšie, v texte za tabuľkou),
table	–	má rovnaký význam ako direktíva tables, ale triedy štýlov budú použité len na najbližšiu tabuľku nasledujúcu za touto direktívou,
firstRows	–	prvé riadky tabuliek,
oddRows	–	nepárne riadky tabuliek,
evenRows	–	párne riadky tabuliek,
lastRows	–	posledné riadky tabuliek,
headCells	–	hlavičkové bunky tabuliek,
leftCells	–	bunky ľavých (prvých) stĺpcov tabuliek,
oddCells	–	bunky nepárnych stĺpcov tabuliek,
evenCells	–	bunky párnych stĺpcov tabuliek,
rightCells	–	bunky pravých (posledných) stĺpcov tabuliek.

Všetky zoznamy tried štýlov, okrem prvého, sú predvolene prázdne (pasívne).

 

Celkovo sú (v predvolenej konfigurácii RS Rheia) dostupné tieto preddefinované triedy štýlov celých tabuliek (to znamená štýlov použiteľných s typmi zoznamov tables a table):

• shaded, framed, blocks, signatures, notes, documentList a innerLines.

V nasledujúcom zozname sú zhrnuté odkazy na ukážky použitia niektorých z uvedených preddefinovaných tried štýlov:

• Ukážka použitia triedy štýlu signatures je v článku Tabuľka s podpisom.
• Trieda notes (v kombinácii s triedou blocks) je použitá v celom tomto manuáli na tvorbu poznámok – pozri kapitolu Použitá symbolika a terminológia.
• Ukážka použitia triedy documentList je v článku Definícia a použitie makier (v kombinácii s triedou shaded).
• Ukážka použitia mierne upravenej triedy štýlu innerLines je v článku Úprava štýlov.

Keďže triedy štýlov shaded, framed a blocks sú veľmi často používané v celom tomto materiáli, vyrobili sme v rámci tejto kapitoly samostatnú ukážku ich použitia, ktorá je uvedená nižšie (pod nasledujúcim textom).

Okrem uvedených tried sú k dispozícii ďalšie tri preddefinované triedy určené na kombinovanie s predchádzajúcimi triedami (stále hovoríme o predvolenej konfigurácii RS Rheia). Slúžia na upravenie horizontálneho umiestnenia celej tabuľky na stránke: left (doľava), center (na stred) a right (doprava).

 

Pozrite sa na to, ako ovplyvnia vzhľad rovnakej tabuľky spomínané tri z preddefinovaných tried štýlov (shaded, framed a blocks, pričom posledná je na ukážku skombinovaná s triedou center, o ktorej bolo povedané, že je určená na kombinovanie a ktorá slúži na horizontálne zarovnanie tabuľky na stránke na stred):

#tables:shaded
*Ľavá bunka hlavičky. → Pravá bunka hlavičky.*
Ľavá bunka tela. → Pravá bunka tela.
Ľavá bunka ďalší riadok. → Pravá bunka ďalší riadok.

#tables:framed
*Ľavá bunka hlavičky. → Pravá bunka hlavičky.*
Ľavá bunka tela. → Pravá bunka tela.
Ľavá bunka ďalší riadok. → Pravá bunka ďalší riadok.

#tables:blocks center
*Ľavá bunka hlavičky. → Pravá bunka hlavičky.*
Ľavá bunka tela. → Pravá bunka tela.
Ľavá bunka ďalší riadok. → Pravá bunka ďalší riadok.

Výsledok:

 

Vyššie uvedený spôsob úpravy štýlov sa vždy vzťahuje na väčší počet buniek (celá tabuľka, riadok, stĺpec, určitá skupina…). Ak je potrebné zmeniť vzhľad individuálnej bunky pomocou tried štýlov, je na tento účel k dispozícii klauzula #cell#«zoznam tried»#, ktorú je potrebné uviesť na začiatku obsahu bunky.

Poznámka:	V nasledujúcom príklade sú použité informácie z kapitoly Úprava štýlov. Dovoľujeme si upozorniť na CSS  klauzulu !important, ktorej význam je v krátkosti diskutovaný na konci uvedenej kapitoly. Na zopakovanie – pravidlo znie: čím menší rozsah vplyvu bude mať použitie klauzuly !important, tým je jej použitie vhodnejšie.

Príklad:

#style: div.page-content table.shaded tr td.redBkg { background-color: #FCC; }
#style: td.blueBkg { background-color: #CCF !important; }

*Hlavička → Hlavička → Hlavička*
normálna → #cell#redBkg#červená → normálna
normálna → normálna → #cell#blueBkg#modrá

Výsledok:

 

Ďalší príklad používajúci prácu so štýlom bunky tabuľky je uvedený na konci kapitoly Zarovnanie obsahu buniek (ide o príklad vertikálneho zarovnania obsahu buniek). Uvedená kapitola tiež úzko súvisí s kapitolou Úprava štýlov.

Súvisiace kapitoly:

• Úprava štýlov
• Preddefinované kódy, definícia vlastných kódov a ďalšie direktívy

 

---

Otázky a úlohy:

1. Aký je rozdiel medzi direktívami #table: a #tables:?
2. Uveďte aspoň päť príkladov direktív, pomocou ktorých je možné v zdrojovom texte RS Rheia ovplyvniť zoznmay tried štýlov platných pre určitú skupinu buniek v tabuľke.
3. Vyrobte vlastný príklad ukazujúci úpravu štýlu prvého stĺpca tabuľky.
4. Vyrobte vlastný príklad ukazujúci úpravu štýlu posledného riadka tabuľky.