TNPW1 Technologie pro publikování na webu

TNPW1Technologie pro publikování na webu seznamy tabulky jejich sémantika Přednáška č. 4 Ing. Martin Adámek Katedra informačních technologií FIM UHK

Seznamy • číslované (ordered list) <ol> • obsahem jsou položky (list item) <li> • vlastní číslování: „value“ • nečíslované (unordered list) <ul> • obsahem jsou položky (list item) <li> • vzhled odrážek lze měnit (příp. odrážku skrýt) • seznam definic (definition list) <dl> • obsahem jsou položky definice <dt> • mají řádkový obsah • a po každém <dt> je vždy vysvětlení <dd> • má blokový (víceřádkový) obsah • http://interval.cz/clanky/xhtml-seznamy-a-vycty/ Přednáška TNPW1 – Martin Adámek

Nečíslovaný seznam – příklad XHTML kód: <ul> <li>Položka 1</li> <li>Položka 2</li> <li>Položka 3</li> </ul> V prohlížeči se zobrazí: • Položka 1 • Položka 2 • Položka 3 Přednáška TNPW1 – Martin Adámek

Číslovaný seznam – příklad XHTML kód: <ol> <li>Položka 1</li> <li>Položka 2</li> <li>Položka 3</li> </ol> V prohlížeči se zobrazí: • Položka 1 • Položka 2 • Položka 3 Přednáška TNPW1 – Martin Adámek

Sémantika: Seznamy ul x ol • nečíslované (unordered list) • nezáleží na pořadí položek • např. seznam požadavků či vlastností • číslované (ordered list) • záleží pořadí položek • např. postup činnosti, pořadí kritérií, výsledky soutěže, požadavky řazené dle důležitosti, apod. • položky čísluje automaticky prohlížeč • příklad pro ul? • příklad pro ol? • seznamy lze vnořovat pro vytvoření struktury • i <ul> do <ol> a naopak • vložený seznam je vložen v položce nadřazeného seznamu • příklad vnoření ol do ul nebo naopak? Přednáška TNPW1 – Martin Adámek

Tabulky • Slouží výhradně k přehledné prezentaci dat (dvourozměrná prezentace) • Byly používány i pro prostorové rozvržení prvků na stránce • Formátováním částí tabulek lze významně ovlivnit vizuální stránku dokumentu (vytvořit rozložení / layout stránky) • Tabulky pro definici rozložení prvků na stránce nejsou určeny ! • Tabulka: <table> • Název tabulky: <caption> • Řádek: <tr> • Buňka: <td> • Buňka záhlaví: <th> Přednáška TNPW1 – Martin Adámek

Tabulky Příklad kódu tabulky <table border="1" cellspacing="0" cellpadding="5"> <caption>Text popisku tabulky</caption> <tr> <td> </td> <th>Roční zisk</th> <th>Pokles/nárůst</th> </tr> <tr> <td>Pobočka 1</td> <td>6,3 mil</td> <td>+11,5%</td> </tr> Přednáška TNPW1 – Martin Adámek

Tabulky <tr> <td>Pobočka 2</td> <td>+15,2 mil</td> <td>16,7%</td> </tr> <tr> <td>Pobočka 3</td> <td>4,5 mil</td> <td>-8,5%</td> </tr> </table> Přednáška TNPW1 – Martin Adámek

Tabulky Ukázka výstupu předcházejícího příkladu: Text popisku tabulky Přednáška TNPW1 – Martin Adámek

Tabulky – syntaxe Tabulka (kostra tabulky) <table></table> • Koncová značka je povinná Řádek tabulky<tr></tr> • Koncovou značku lze vynechat Buňka<td></td> • Koncovou značku lze vynechat Záhlaví sloupce(buňka)<th></th> • Obsah této buňky (hlavičky) se zobrazuje v různém formátu v závislosti na prohlížeči • Koncovou značku lze vynechat Přednáška TNPW1 – Martin Adámek

Tabulky – syntaxe Titulek tabulky<caption></caption> • Formát popisku je implicitně také závislý na prohlížeči • Koncová značka je povinná Záhlaví tabulky<thead></thead> • Ohraničuje skupinu řádků tabulky, považovaných za její hlavičku • Slouží pro opakování hlavičky při vícestránkových výstupech • V tabulce může být použito jen jednou • Záhlaví tabulky není v XHTML 1,0 povinné, ale je vhodné • Koncovou značku lze vynechat Přednáška TNPW1 – Martin Adámek

Tabulky – syntaxe Zápatí tabulky<tfoot></tfoot> • Obdoba záhlaví tabulky • Koncovou značku lze vynechat Oddíl tabulky<tbody></tbody> • Vytváří samostatný oddíl tabulky • Oddíly se nemohou prolínat • Oddíl může obsahovat pouze řádky, tvořené elementem <tr> • V prohlížeči se vizuálně oddělí jednotlivé oddíly • Koncovou značku lze vynechat Přednáška TNPW1 – Martin Adámek

(Tabulky – syntaxe) Skupina sloupců<colgroup></colgroup> • Koncovou značku lze vynechat Sloupec<col></col> • Definuje vzhled sloupce ve skupině sloupců • Koncovou značku lze vynechat Tyto elementy jsou podporovány pouze v prohlížečích IE 6 a NN 6 Přednáška TNPW1 – Martin Adámek

Atributy tabulky Základní atributy tabulky(element<table>) align … horizontální zarovnání vůči nadřazenému elementu border … ohraničení tabulky cellspacing … prostor mezi buňkami tabulky cellpadding … prostor mezi okrajem buňky a jejím obsahem width … šířka tabulky (lze zadat absolutně v pixelech nebo relativně v %) Přednáška TNPW1 – Martin Adámek

Atributy buňky v tabulce Základní atributy buňky (element <td>, <th>) align … horizontální zarovnání obsahu v rámci buňky cellspacing … prostor mezi buňkami tabulky cellpadding … prostor mezi okrajem buňky a jejím obsahem colspan … buňka přes více sloupců (column span) height … výška buňky / řádku (stačí uvést u jedné buňky v řádku) nowrap … zalamování textu v buňce rowspan … umožňuje vytvoření buňky přes více řádků (row span) valign … vertikální zarovnání obsahu v rámci buňky width … šířka buňky Přednáška TNPW1 – Martin Adámek

Sémantika: Seznam versus tabulka • Seznamy • vyjmenovávají lineární (jednorozměrný) seznam něčeho • co je na stejné úrovni, „vedle sebe“, nebo „za sebou“ • např. vlastnosti něčeho, pořadí, postup, seznam požadavků, apod. • příklad ? • netříděné x tříděné x seznam definic • viz dále Přednáška TNPW1 – Martin Adámek

Sémantika: Seznam versus tabulka • Tabulka • přehledně zobrazuje 2D data • rozdělení dat do řádků a sloupců má svůj účel a smysl • řádek něco znamená, sloupec něco znamená • „souřadnice“ buňky mají význam • pokud ne, pak tento obsah nepatří do tabulky • příklad ? Přednáška TNPW1 – Martin Adámek

Sémantika: Tabulka • nezneužívá se pro definici rozložení stránky • a to ani pro fotogalerii ! • pokud jde o lineární (1D) seznam obrázků, není tabulka na místě • ale při tabulkovém uspořádání/rozdělení dat dle kritérií X a Y mohou být v tabulce obrázky • fotky jsou setříděná „data“, naleznutelná dle kritérií v řád. a sloup. • např. http://www.adamek.cz/dodavky/transit/prehledgeneraci.htm • fotky by mohly být i ve všech sloupcích, ale musí to mít smysl, např: • v řádcích jednotlivé generace • ve sloupcích jednotlivá karosářská provedení • v buňkách pak patřičné fotky, zařazené dle kritérií • jiný příklad legálních obrázků v tabulce ? Přednáška TNPW1 – Martin Adámek

Sémantika: Tabulka (shrnutí) • Tabulka • musí být 2D • musí mít více než 1 řádek • musí mít více než 1 sloupec • rozdělení do řádků a sloupců má důvod a systém • jinak to není (nemá být) tabulka Přednáška TNPW1 – Martin Adámek

Příště • formuláře • další elementy v (X)HTML Přednáška TNPW1 – Martin Adámek

TNPW1 Technologie pro publikování na webu