Webové technológie

Poznámky:

5. Tabuľky

Rámčeky:

Keď chceme okolo svojej tabuľky alebo buniek vytvoryť rámček, tak k tomu jednoducho použijeme vlastnosť border alebo vlastnosti border-width, border-style a border color. Rámček potom prideľujeme buď celej tabuľke - elementu table alebo iba bunkám - elementom td a th.

Príkazom border-collapse s hodnotou collapse dokážeme skryť medzery medzi rámčekami.

Bunky:

border-spacing pomocou tejto vlastnosti dokážeme vytvoriť medzeru medzi rámčekami jednotlivých buniek. Hodnotami môžu byť napr. px alebo aj em. Tento priestor vzniknutý medzi bunkami potom vyplňuje pozadie tabuľky.

empty-cells - táto vlastnosť s hodnotou hide nám skryje bunku tabuľky v ktorej sa nenachádza žiaden obsah.

caption-side - umiestnenie nadpisu tabuľky:

• top- navrchu tabuľky
• bottom - na spodku tabuľky
• left - na ľavej strane tabuľky
• right - na pravej strane tabuľky

text-align - zarovnanie textu(obsahu) v bunke tabuľky (left, right, center, justify)

vertical-align - vertikálne zarovnanie obsahu v bunke tabuľky (top, middle, bottom

Ako na automatické striedanie farby riadkov v tabuľke:

Ak máte radi efekt striedania farby riadkov tabuľky, potom je možné tento efekt vykonať manuálne (pomocou triedy + farba pozadia) alebo nechať prehliadač prideliť farby pozadia riadkom automaticky: a to buď iba párnym riadkom alebo iba nepárnym riadkom.

K tomuto môžeme využíť selektor n-tého potomka. Selektorom je štrukturálna pseudotrieda nth-child(n).
n v zátvorke vyjadruje poradie potomka rodičovského elementu, pričom n je zároveň násobiteľom.

Trik pre ofarbenie párnych riadkov:

tr:nth-child(2n) { background: #E3E3E3; }

A pre ofarbenie nepárnych riadkov:

tr:nth-child(2n+1) { background: #E3E3E3; }