načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha: Tvorba WWW stránek pro úplné začátečníky - Martin Domes

Tvorba WWW stránek pro úplné začátečníky
-14%
sleva

Kniha: Tvorba WWW stránek pro úplné začátečníky
Autor:

Už je nejvyšší čas vytvořit vlastní internetové stránky! Ať už chcete osobní stránky, blog či fotogalerii, nebo prezentovat svoji firmu, s knihou z edice Pro úplné začátečníky to ... (celý popis)


hodnoceni - 71%hodnoceni - 71%hodnoceni - 71%hodnoceni - 71%hodnoceni - 71% 83%   celkové hodnocení
3 hodnocení + 0 recenzí

Specifikace
Nakladatelství: Computer press
Médium / forma: Tištěná kniha
Rok vydání: 2017-01-01
Počet stran: 248
Rozměr: 167 x 225 mm
Úprava: 246 stran : ilustrace
Vydání: Vyd. 1.
Vazba: brožovaná lepená
ISBN: 9788025121603
EAN: 9788025121603
Ukázka: » zobrazit ukázku
Popis

Už je nejvyšší čas vytvořit vlastní internetové stránky! Ať už chcete osobní stránky, blog či fotogalerii, nebo prezentovat svoji firmu, s knihou z edice Pro úplné začátečníky to pro vás bude velmi snadné. Zkušený autor vás v knize provede všemi kroky, které vás na cestě za vašimi vlastními internetovými stránkami čekají. To vše jednoduše, srozumitelně a bez zbytečných detailů. Autor vám doporučí nejlepší a nejrychlejší pracovní postup, poradí s řešením možných problémů. Na praktických cvičeních se budete postupně zdokonalovat až vytvoříte kompletní WWW stránky. S knihou se mimo jiné naučíte: - Vytvářet stránky ve speciálním editoru i v Poznámkovém bloku - Použít značky jazyka HTML k vytvoření kostry stránky - Formátovat texty na stránce, tvořit seznamy a tabulky - Vkládat do stránky hypertextové odkazy a obrázky - Vytvořit záhlaví stránky s logem a vkládat barevná pozadí - Graficky zpracovat různé typy navigačních nabídek - Tvořit dvousloupcové rozvržení (layout) stránky - Pomocí CSS umísťovat části stránky dle svých požadavků - Nahrát své stránky na Internet a zařídit, aby vás lidé našli (SEO) Z adresy http://knihy.cpress.cz/k1622 si můžete stáhnout veškeré zdrojové materiály a kódy použité ve cvičeních v knize. Díky tomu máte možnost pracovat společně s autorem, takže dočtení této knihy budete mít konečně své vlastní WWW stránky! Edice Pro úplné začátečníky: - Zaměření na praktické využití - Srozumitelný výklad krok za krokem - Popis řešení možných problémů - Vizuální propojení textů a obrázků O autorovi: Martin Domes je zkušený tvůrce WWW stránek a autor několika knih, např. Internet pro úplné začátečníky či Tvorba webových stránek Jednoduše, srozumitelně, názorně. Jako redaktor a šéfredaktor počítačové literatury nakladatelství Computer Press stojí za vznikem více než stovky počítačových knih. Je zároveň i tvůrcem inovované edice Pro úplné začátečníky. Jeho web najdete na adrese www.MDwebdesign.cz .

Předmětná hesla
Související tituly dle názvu:
Internet pro úplné začátečníky Internet pro úplné začátečníky
Domes Martin
Cena: 212 Kč
Internet pro úplné začátečníky Internet pro úplné začátečníky
Domes Martin
Cena: 234 Kč
CSS a XHTML CSS a XHTML
Procházka David
Cena: 220 Kč
Zákazníci kupující knihu "Tvorba WWW stránek pro úplné začátečníky" mají také často zájem o tyto tituly:
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

117

Kapitola 5

Tvoříme tabulky

V předchozích kapitolách jsme získali potřebný základ k tomu, abychom mohli úspěšně

tvořit části i celé WWW stránky. Pojďme si tedy na chvíli oddechnout. Podíváme se na

projekt tvorby tabulky.

Tabulky se dříve používaly k tvorbě samotných WWW stránek, respektive jejich layoutu. S nástupem CSS ale tomuto odzvonilo a tabulky se tak opět používají pouze k tomu,

k čemu byly navrženy – tedy k prezentaci tabulkových dat. V kombinaci (X)HTML a CSS

v této kapitole vytvoříme tabulku kontaktů na zástupce fi ktivní společnosti. Naučíme se

tak, jak vytvořit poutavou a funkční tabulku, v níž snadno uspořádáme tabulková data.

Výklad v této kapitole postupuje krok za krokem, je tedy nutné sledovat jej celý. Dílčí

postupy na sebe v každé podkapitole i částech navazují. Pro následující příklady lze také

využít kódů, jež jsou k dispozici k této knize.

Obrázek 5.1. Tuto tabulku vytvoříme v kapitole 5

Poznámka: Tato kapitola plně využívá znalostí CSS, které jste mohli získat v předchozích dvoukapitolách. Pokud vám použití některé z vlastností CSS nebude jasné, vraťte se do předchozích kapitol, kde je

použití jednotlivých vlastností vysvětleno. Vytváříme kostru tabulky s údaji

Ze všeho nejdříve se po dvou kapitolách věnovaných CSS vrátíme zpět ke značkovacímu

jazyku, tedy k HTML, respektive XHTML. Nejdříve totiž bude třeba vytvořit kostrutabulky pomocí značek v našem dokumentu (X)HTML. Z čeho se tabulka skládá

Připomeňme si nejprve to nejdůležitější, tedy z čeho se taková tabulka skládá. Vezměme

si třeba tabulkový procesor Excel, v němž běžné tabulky tvoříme nejčastěji. Tabulkoutvoří následující prvky:

5

VYTVÁŘÍME KOSTRU TABULKY S ÚDAJI


KAPITOLA 5 · TVOŘÍME TABULKY

118

Q Základním kamenem tabulky je buňka.

Q Buňky se řadí do řádků a sloupců.

Q Tabulky mají obvykle nějaké záhlaví obsahující názvy sloupců, případně řádků.

Poznámka: Mimo těchto základních prvků může tabulka obsahovat také hlavičku a patičku tabulky.

Těm se ale věnovat nebudeme.

Všechny tyto části lze vidět na obrázku 5.1. A my se podíváme na to, jak je uspořádat

v dokumentu (X)HTML a později jim přiřadíme styly CSS, čímž získáme fi nální podobu.

Ale popořádku.

Tvorba tabulky v několika krocích

Jak už jsme si řekli na začátku kapitoly, vytvářet budeme tabulku kontaktů fi ktivníspolečnosti. K tomu si vytvoříme nějaký základní layout, jak jsme se naučili v předchozí kapitole.

Tělu dokumentu přiřadíme pevnou šířku a zarovnáme ho na střed okna prohlížeče. Použít

ale můžeme i základní stránku bez stylů. Je to na nás.

1. Tvorbu tabulky začneme defi nováním tabulky ve zdrojovém kódu. K tomuto účelu

slouží párová značka table (česky tabulka):

<table>

<!-- sem patří tabulka -->

</table> 2. Následuje řádek tabulky. Řekněme, že naše fi ktivní společnost bude mít v kontaktech

3 zaměstnance, vytvoříme tedy tři řádky. Pro řádek tabulky zde máme párovou značku

tr (zkratka anglického table row, česky řádek tabulky):

<table>

<tr>

<tr>

<tr>

</table> 3. Do každého řádku budeme chtít vložit údaje jednoho zaměstnance. Ke každémuzaměstnanci budeme chtít přidělit údaje tři: jméno a příjmení, funkci, e-mailovou adresu. V každém

řádku tudíž vytvoříme tři buňky, jejichž obsahem budou výše uvedené informace. Buňku

tabulky označuje párová značka td (zkratka anglického table data, česky údaje tabulky):

<table>

<tr><td></tr>

<tr><td></tr>

<tr><td></tr>

</table> 4. Aby se z tabulky začalo také něco zobrazovat v okně prohlížeče, bude třeba tabulku,

respektive buňky tabulky naplnit údaji o našich zaměstnancích. Výsledný kód bude

vypadat následovně:


119

<table>

<tr>

<td>Petr Novák

<td>generální ředitel

<td>novak@nase-spolecnost.cz

</tr>

<tr>

<td>Jarmila Gabrielová

<td>provozní vedoucí

<td>gabrielova@nase-spolecnost.cz

</tr>

<tr>

<td>Ingrid Brouzdalová

<td>hlavní účetní

<td>brouzdalova@nase-spolecnost.cz

</tr>

</table> Ještě než se na výsledek podíváme do prohlížeče, přidejme tabulce a buňkám jednoduchý rámeček pomocí jediného pravidla CSS:

table,td {

border: 1px solid black;

}

Na obrázku 5.2 vidíme výsledek našeho několikakrokového

snažení. Naše první tabulka je na

světě! Samozřejmě ještě nevypadá nijak úchvatně, ale jakmile na ni pustíme styly CSS, vše bude rázem vypadat jinak.

Na naší tabulce si především všimněme toho, že data jsou přehledně uspořádána do řádků

a sloupců. Obsah se pak zobrazuje v jednotlivých buňkách. Tabulka je ve výchozím stavu

velká podle svého obsahu: pokud dáme textu do buněk více, bude širší, pokud méně, bude

užší. Pomocí CSS později nastavíme své velikosti.

Jak je to se sloupci tabulky

Možná nás tyto otázky již napadly: Poskytuje jazyk HTML také element pro sloupec?

A kam se zapisuje? Odpověď na obojí získáme.

Ano, sloupec tabulky také existuje a zapisuje se pomocí značek do zdrojového kódu.Nicméně slouží pouze k označení sloupce a k jeho následnému formátování pomocí CSS. Jeho

přítomnost v kódu tedy není nutná, pokud ovšem nechceme každý sloupec formátovat

trochu jinak.

Poznámka: Formátování tabulky se budeme věnovat v následující podkapitole.

Obrázek 5.2. Naše první tabulka vytvořená pomocí HTML

a zobrazená v prohlížeči

VYTVÁŘÍME KOSTRU TABULKY S ÚDAJI


KAPITOLA 5 · TVOŘÍME TABULKY

120

Ale podívejme se raději na příklad, jímž zároveň zodpovíme druhou otázku. Našetabulka má tři sloupce a my budeme chtít prvnímu sloupci přidělit jiný styl. V HTML to bude

vypadat následovně (tabulku v tomto i dalších ukázkách kódu zkracuji – celý kód vizpříklady, které si lze stáhnout ke knize):

<table>

<col style=“background:yellow“ />

<tr>

...

</table> Výsledek z obrázku 5.3 je patrný – první sloupec má nyní žlutépozadí (i když v knize žlutou nevidíme). Ovšem kód si zasluhuje vysvětlení. Jak si můžeme všimnout, hned za otevírací značkou table se objevily tři nepárové značky <col /> (zkratka anglického column, česky sloupec). Každý element col představuje jeden sloupec tabulky. Jednomu z nich jsme poté přiřadili pomocí řádkového stylu žluté pozadí. Použít bychom samozřejmě mohli spíše třídu CSS, ale pro tyto demonstrativní účelytento příklad postačí. Důležité: Vždy je třeba správně označit tolik elementů col, kolik sloupců tabulka ve skutečnosti má. Ani víc, ani míň. Nezapomeňte také značku col správně uzavřít pomocí lomítka. Po tomto příkladu by nás měla napadnout další otázka. Dva pravé sloupce nemají žádný styl, nelze je tedy napsat nějak jednodušeji? Protože co kdybychom zde neměli dva, aletřeba 5 či více sloupců? Museli bychom vložit pět elementů col? Odpověď samozřejmě zní, že to jde jednodušeji. Můžeme totiž velmi snadno více elementů col sdružit do skupiny pomocí elementu colgroup. To se hodí zvláště v případě, že chceme několika sloupcům přidělit stejný styl. Řekněme, že budeme chtít dvěma pravým sloupcům přidělit třeba červené pozadí. Pak bude kód vypadat následovně:

<table>

<col style=“background:yellow“ />

<colgroup span=“2“ style=“background:red“>

<tr>

...

</table> Výsledek zachycuje obrázek 5.4. Co jsme provedli? 1. Pomocí párové značky colgroup jsme vytvořili skupinu sloupců. 2. Hodnotou parametru span jsme určili počet sloupců ve skupině na dva. 3. Všem sloupcům ve skupině jsme přiřadili červené pozadí pomocí řádkového stylu.

Obrázek 5.3. První sloupec tabulky jsme naformátovali

Obrázek 5.4. Naformátovali jsme dva pravé sloupce


121

Tip: Element colgroup může dále obsahovat elementy col. Jejich styl přepíše nastavení stylu uelementu colgroup. Pokud tedy budete mít větší skupinu sloupců, ale jednomu z nich budete chtítpřidělit jiný styl, pak do elementu colgroup prostě vložte elementy col. Pozor ale na to, aby jejich počet

odpovídal číslu, které je hodnotou parametru span.

Řešení problému: Vlastnost CSS na vaše sloupce nepůsobí? Nejde o vaši chybu, ale jde o neúplnou

implementaci prohlížeče. Sloupcům lze přidělit jen velmi málo vlastností CSS. Barva pozadí neděláproblémy žádnému prohlížeči, ale například barvu písma ani nezkoušejte ve Firefoxu, naopak si s ní poradí

Internet Explorer. Použití sloupců se tak stává velmi omezené.

Prázdné buňky

Závěrem této podkapitoly si musíme zodpovědět ještě jednu palčivou otázku. Mnozí z nás

jistě netrpělivě sami zkusili, co se stane, když buňka v tabulce zůstane prázdná. Ano, i to se

může stát a poradíme si i s takovou situací.

V naší tabulce třeba nebudeme chtít zobrazit e-mail na účetní (ať už k tomu budeme mít

jakýkoli důvod). Pak zkrátka necháme buňku, která by jinak e-mailovou adresuobsahovala, prázdnou. Naznačuje to následující kód:

<table>

<tr>

...

</tr>

<tr>

<td>Ingrid Brouzdalová

<td>hlavní účetní

<td>

</tr>

</table> Jak si můžeme všimnout na obrázku 5.5, obsah z buňky zmizel a místo toho se zdezobrazila prázdná buňka. V tabulce zkrátka není nutné mít vyplněné všechny buňky. Řešení problému: Nezobrazil se vám kolem prázdné buňky v Internet Exploreru rámeček? Jde o vnitřnínastavení Internet Exploreru, které nijak neovlivníte. Zobrazení nebo nezobrazení rámečku kolem prázdné buňky řídí vlastnost CSS s názvem empty-cells, nicméně Internet Explorer ji nezná. Ovšem aby tabulka vypadala stejně ve všech prohlížečích, můžete pomocí ní vypnout zobrazování rámečku kolem prázdných buněk pro ostatní prohlížeče. Použijte k tomu pravidlo se selektorem table, jemuž přidělíte empty-cells: hide .

Přidáváme záhlaví tabulky

Každá správná tabulka obsahuje mimo samotných údajů také hlavičku. Jejím smyslem je

pojmenovat sloupce, případně řádky tabulky. Pokud se vrátíme k příkladu z minulépodkapitoly, zde máme tři sloupce, které bychom mohli nazvat:

Obrázek 5.5. Tabulka s jednou prázdnou buňkou

PŘIDÁVÁME ZÁHLAVÍ TABULKY


KAPITOLA 5 · TVOŘÍME TABULKY

122

Q Jméno

Q Funkce

Q E-mail

Do naší tabulky tedy přidáme hlavičku s názvy sloupců. Pokud bychom měli údajeuspořádané jinak, mohli bychom tvořit názvy řádků. I v našem případě bychom mohlipojmenovat řádky tabulky, a to například čísly. Držme se nyní ale pouze záhlaví tabulky, v němž

se budou nacházet názvy sloupců.

Záhlaví tabulky v několika krocích

I v případě záhlaví tabulky se budeme zaobírat kódem (X)HTML. Do tabulky totižpřidáme další řádek s buňkami záhlaví tabulky. Pokračujme s tabulkou z předchozí podkapitoly.

Postupovat budeme následovně:

1. Do naší tabulky přidáme další řádek pro buňky s názvy sloupců:

<table>

<tr>

<tr>

<td>Petr Novák

...

</table> 2. Zatím pro nás nic nového, ale nyní to přijde. Do řádku tabulky totiž musíme vložit buňku

záhlaví tabulky. K tomuto účelu ovšem nepoužijeme párovou značku td, ale jinoupárovou značku, která je určená pro záhlaví tabulky – th (zkratka anglického table header cell,

česky buňka záhlaví tabulky). Přidáme tedy tři buňky záhlaví pro názvy sloupců:

<table>

<tr>

<th>

</tr>

<tr>

<td>Petr Novák

...

</table> 3. V posledním kroku nebude následovat nic jiného než naplnění buněk obsahem. V našem

případě vložíme do buněk záhlaví tabulky názvy sloupců: Jméno, Funkce, E-mail.Výsledné záhlaví bude v kódu vypadat takto:

<table>

<tr>

<th>Jméno

<th>Funkce

<th>E-mail

</tr>

<tr>

<td>Petr Novák

...

</table>


123

Také záhlaví tabulky přidáme rámeček (pouze pro lepší znázornění), takže doplnímepravidlo CSS:

table,td, th {

border: 1px solid black;

} Výsledek ukazuje obrázek 5.6. Čeho si můžeme všimnout? Q Ve výchozím formátování se obsah buňky záhlaví zarovnává na střed. Q Ve výchozím formátování se obsah buňky záhlaví zobrazuje tučně. Toto formátování samozřejmě později pomocí CSS změníme, aby vyhovovalo naší představě.

Spojení více buněk do jediné

Nyní už umíme téměř vše, co bychom ohledně tabulek měli ve zdrojovém kódu (X)HTML

umět. Prozradíme si ovšem ještě jednu fi ntu, a tou je spojení více buněk do jedné. Tento

příklad si vyzkoušíme záměrně na záhlaví tabulky, kde má také největší opodstatnění.

Vezměme tabulku se záhlavím, kterou jsme vytvářeli dříve. V ní budeme chtít změnit

názvy sloupců Jméno a Funkce na jeden jediný: Zaměstnanec. Tyto dvě buňky zároveň

budeme chtít spojit do jediné. Kód záhlaví tabulky upravíme následovně:

<table>

<tr>

<th colspan=“2“>Zaměstnanec</th>

<th>E-mail

</tr>

<tr>

<td>Petr Novák

...

</table> Výsledek ukazuje obrázek 5.7. A co jsme provedli? 1. Vymazali jsme druhou buňku záhlaví tabulky (element th) s názvem sloupce Funkce. 2. Text v první buňce záhlaví jsme přejmenovali na Zaměstnanec – což bude nyní název

obou levých sloupců. 3. Otevírací značce th jsme přidělili parametr colspan, jehož hodnotou je počet sloupců,

přes které se buňka roztáhne – v našem případě přes dva sloupce. Jak můžeme vidět, buňka se roztáhla přes dva sloupce, což dokazuje nejen rámeček, ale také zarovnání textu na střed přes oba sloupce. Spojovat buňky lze však také přes řádek, nejen přes sloupec. Parametr přitom vždy patří otevírací značce buňky (td nebo th) a jeho hodnota označuje počet sloupců, respektive řádků. Parametry jsou následující: Q colspan – roztahuje buňku přes sloupce tabulky (zleva doprava) Q rowspan – roztahuje buňku přes řádku tabulky (shora dolů)

Obrázek 5.6. Tabulka se záhlavím

Obrázek 5.7. Dvě buňky záhlaví jsme spojili do jediné

PŘIDÁVÁME ZÁHLAVÍ TABULKY


KAPITOLA 5 · TVOŘÍME TABULKY

124

Důležité: Při použití parametrů vždy nezapomeňte vymazat přebytečné buňky na řádku (v případě

parametru colspan) nebo ve sloupci (v případě parametru rowspan).

Abychom všemu správně rozuměli, podívejme se také na použití parametru rowspan. V naší

tabulce můžeme například chtít uvést jedinou e-mailovou adresu, která bude sbíratvšechny dotazy směřující na kohokoliv ve společnosti. Proč ovšem uvádět třikrát stejnou adresu,

když stačí spojit všechny tři buňky do jedné a v ní uvést adresu jedinkrát?

Kód bude vypadat následovně:

<table>

...

<tr>

<td>Petr Novák

<td>generální ředitel

<td rowspan=“3“>info@nase-spolecnost.cz

</tr>

<tr>

<td>Jarmila Gabrielová

<td>provozní vedoucí

</tr>

<tr>

<td>Ingrid Brouzdalová

<td>hlavní účetní

</tr>

</table> Výsledek zaznamenává obrázek 5.8. Všimněme si, že jsme z kódu vymazali všechny buňky s e-mailovou adresou a ponechali pouze jednu s parametrem rowspan, jemuž jsme přidělili hodnotu 3, aby se buňka roztáhla přes tři řádky nad sebou.

Formátujeme tabulku a její části

Přesuňme se nyní od zdrojového kódu konečně ke kaskádovým stylům. Vrhneme se totiž

na vzhled tabulky, který nás nyní pálí nejvíce. Pokračovat budeme s tabulkou, kterou jsme

vytvořili v této kapitole. Téměř všechny použitelné vlastnosti CSS už známe, nyní je pouze

použijeme na tabulku a její elementy.

Rozměry a okraje tabulky a buněk

Začneme s rozměrem celé tabulky. V našem layoutu máme tabulku umístěnou v dokumentu, v němž máme nastavenou pevnou šířku. Nic tedy nebrání tomu, abychom tabulku

nechali roztáhnout přes celou šířku.

Šířka tabulky. Ve složitějších layoutech můžeme roztažení přes celou šířku často použít

také, protože tabulka se bude obvykle vyskytovat například v obsahové části WWWstránObrázek 5.8. V tabulce jsme spojili tři buňky narůzných řádcích do jedné


125

ky. Není tedy důvod, proč nevyužít celou šířku. Mohli bychom ovšem tabulce nastavit také

šířku pevnou, například pomocí pixelů.

table {

width: 600px;

} Obrázek 5.9. Tabulka s pevnou šířkou 600 pixelů Jak si můžeme všimnout, prohlížeč roztáhl rovnoměrně také šířky všech sloupců tabulky. Šířka buněk se stále odvíjí od množství obsahu. Prohlížeč přitom vypočítá šířku sloupce podle buňky s největším množstvím textu. Poznámka: Jestliže bude prostor pro tabulku menší, než je její obsah, šířka tabulky a buněk se zmenší pouze tak, aby vždy obsáhla veškerý obsah. Vnitřní okraj buněk tabulky. Nyní je tabulka vzdušnější, ovšem texty jsou stálenamačkané na rámečcích. Tento problém vyřešíme pomocí vnitřního okraje, který přidělímebuňkám pomocí vlastnosti padding:

td, th {

padding: 3px 5px;

} Obrázek 5.10. Buňky dostaly vnitřní okraj Výsledek ukazuje obrázek 5.10. Všem buňkám (elementům td a th) jsme přidělili vnitřní okraj: Q tři pixely pro horní a spodní vnitřní okraj, Q pět pixelů pro levý a pravý vnitřní okraj.

FORMÁTUJEME TABULKU A JEJÍ ČÁSTI


KAPITOLA 5 · TVOŘÍME TABULKY

126

Tip: Pokud byste chtěli celý obsah tabulky posunout dále od rámečku celé tabulky, pak byste mohli

vlastnost padding přidělit také elementu table.

Zarovnání obsahu buněk

Další zastávkou za dokonale vypadající tabulkou bude zarovnání obsahu buněk tabulky.

Ve výchozím stavu, jak je už zvykem, formátuje prohlížeč všechen text tak, aby sezarovnával doleva. V případě dvou pravých sloupců ale můžeme chtít jiný výsledek: zarovnání na

střed. Pak stačí jednoduchý zákrok pomocí vlastnosti text-align.

Zde nás nejspíš napadne, že bychom mohli skvěle využít elementů col a colgroup, jimžbychom zarovnání přidělili, a prohlížeč by se postaral o zarovnání všech buněk ve sloupci.

Bohužel ale tato možnost nefunguje například ve Firefoxu, a protože chceme, aby tabulka

vypadala ve všech prohlížečích stejně, budeme muset zarovnání přidělit každé buňce zvlášť.

Provedeme to ve dvou krocích:

1. Ve zdrojovém kódu nejdříve buňkám ve druhém a třetím sloupci přidělíme třídu, kterou

si pojmenujeme například nastred (výpis kódu je zkrácený, nicméně doplňte všude):

<table>

...

<tr>

<td>Petr Novák

<td class=“nastred“>generální ředitel</td>

<td class=“nastred“>novak@nase-spolecnost.cz</td>

</tr>

...

</table> 2. Poté v zápisu stylů vytvoříme pravidlo CSS s volnou třídou. Takto ji budeme mocipozději použít i u jiných elementů, než jsou buňky tabulky.

.nastred {

text-align: center;

}

Obrázek 5.11. Text v buňkách ve druhém a třetím sloupci jsme zarovnali na střed buňky

Na obrázku 5.11 vidíme průběžný stav tabulky. Obsah buněk ve druhém s třetími sloupci

je nyní dle našeho požadavku zarovnaný na střed. Záhlaví tabulky zde formátovatnemusíme, neboť prohlížeč obsah těchto buněk formátuje na střed automaticky.


127

Nyní bude třeba ještě sladit zarovnání názvu prvního sloupce – Jméno. Bylo by dobré, aby

i tento text byl zarovnaný doleva jako text buněk se jmény. Provedeme tedy opět dva kroky:

1. Buňce záhlaví s textem Jméno přidělíme třídu, například doleva.

<table>

<tr>

<th class=“doleva“>Jméno</th>

<th>Funkce

<th>E-mail

</tr>

...

</table> 2. V šabloně stylů vytvoříme pravidlo CSS pro třídu doleva. Opět ji necháme volnou,abychom ji mohli případně později použít i pro jiné elementy, než je th.

.doleva {

text-align: left;

}

Obrázek 5.12. Správně zarovnané máme nyní i záhlaví tabulky

Správně zarovnané záhlaví prvního sloupce zachycuje obrázek 5.12. Tím jsme dokončili

zarovnání obsahu tabulky a můžeme se posunout dále.

Jak na barvy v tabulce

Záhlaví tabulky bývá obvykle jinak barevné než běžné údaje v tabulce. Výchozíformátování prohlížeče zahrnuje pouze tučnost textu, což nemusí být postačující. Na řadu tedycelkem logicky přijde pozadí a barva textu.

Vytvořme tedy pravidlo, jímž buňkám hlavičky nastavíme tmavou barvu pozadí a světlou

barvu textu. V našem případě tmavě modrou pro pozadí buněk a bílou jako barvu textu:

th {

background: #005496;

color: #FFF;

}

Obrázek 5.13. Barvy v záhlaví tabulky jasně odlišují záhlaví od zbytku tabulky

FORMÁTUJEME TABULKU A JEJÍ ČÁSTI


KAPITOLA 5 · TVOŘÍME TABULKY

128

Tip: Pozadí lze nastavit také celé tabulce, tedy elementu table. Buňky mají ve výchozím stavu pozadí

průhledné, takže barva pozadí tabulky budou zároveň i barvou pozadí buněk. Jakákoli nastavená barva

pozadí buněk pak přepíše pozadí tabulky. Více v části o specifi čnosti selektorů na straně 112.

Na obrázku 5.13 lze vidět, že jsme snadno dosáhli kýženého efektu a vizuálně jsme takoddělili záhlaví od zbytku tabulky.

Velice pěkným vizuálním efektem je také vybarvení řádků tabulky střídavě – napříkladjeden bílý, další šedý a tak dále. Tento efekt nyní vytvoříme v naší tabulce. Postupovatbudeme takto:

1. Ve zdrojovém kódu nejdříve označíme řádky, jejichž buňky budou mít šedivé pozadí.

Použijeme pro to třeba tříduzmenaozadi. (Kód je zkrácený.)

<table>

...

<trclass=“zmenaozadi“>

<td>Petr Novák

...

</tr>

<tr>

<td>Jarmila Gabrielová

...

</tr>

<trclass=“zmenaozadi“>

<td>Ingrid Brouzdalová

...

</tr>

</table> 2. V šabloně CSS vytvoříme pravidlo se selektorem třídyzmenaozadi, jemuž přidělíme

pomocí vlastnosti background šedivou barvu pozadí:

.zmena-pozadi {

background: #d1d1d1;

}

Obrázek 5.14. Střídání pozadí řádků tabulky je často používaným efektem

Střídání barvy pozadí (obrázek 5.14) se často používá spíše u delších tabulek, v nichž je

hodně záznamů. V naší tabulce příliš nevynikne, proto bude dobré, když do tabulkypřidáte více řádků se záznamy a prohlédnete si výsledek právě na větší tabulce.


129

Upravujeme rámečky

Rámečky tabulky jsou pro celkový vzhled tabulky také velmi důležité. Naší tabulce jsme hned

na začátku přidělili černý, nepřerušovaný rámeček o velikosti 1 pixel – ten se díkynásledujícímu pravidlu použil jak na tabulku jako takovou, tak na buňky (elementy td a th):

table, td, th {

border: 1px solid black;

} Možná nás ale právě nenadchnou mezery mezi rámečkem tabulky a rámečky buněk. Vše nyní vypadá příliš uměle. Navíc, vzhledem k tomu, že jsme použili tmavě modré pozadí záhlaví, měla by barva rámečku ideálně korespondovat s touto zvolenou barvou. Na místě tedy bude úprava. Jako první si prozradíme fi ntu, díky níž vyřadíme ze hry mezery mezi jednotlivýmirámečky. Rámečky se zkrátka zhroutí jeden do druhého a rámečky buněk překryjí rámeček tabulky. Ten se tak jakoby vůbec nepoužije. Toho pak využijeme ke změně barevrámečků. Začněme ale rovnou ukázkou. Doplníme totiž již existující pravidlo, v němž určujeme podobu rámečku:

table, td, th {

border: 1px solid black;

border-collapse: collapse;

} Jak ukazuje obrázek 5.15, jednoduchým zákrokem jsme nechali všechny rámečky zhroutit do sebe, čímž jsme zrušili veškeré mezery. Nevypadá nyní tabulka lépe? Nicméněvyžadujme také vysvětlení. Zhroucení rámečku způsobila vlastnost border-collapse, která určuje, jaký modelrámečku prohlížeč k jejich vykreslení použije. Možnosti jsou pouze dvě: Q separate – model odděleného rámečku, s nímž jsme pracovali od začátku kapitoly. Jde

o výchozí hodnotu. Q collapse – model zhrouceného rámečku. Jeho výsledkem je překrytí rámečků –rámečky buněk překryjí rámeček tabulky a rámeček buňky více vlevo překryje rámečekbuňky vpravo. A abychom sladili také barvy rámečku a pozadí záhlaví tabulky, změňme barvu rámečku:

table, td, th {

border: 1px solid #005496;

border-collapse: collapse;

} Obrázek 5.15. Rámečky se zhroutily do sebe

FORMÁTUJEME TABULKU A JEJÍ ČÁSTI


KAPITOLA 5 · TVOŘÍME TABULKY

130

Obrázek z pochopitelných důvodů neuvádím. Nicméně vše si můžeme ověřit na svém

monitoru. Použít lze i kódy, které jsou ke stažení k této knize.

K dokonalosti už chybí jen drobnost. Co takhle kdyby byl vnitřní rámeček buněk záhlaví

tabulky bílý jako jejich text, čímž by na tmavém pozadí vynikl? Stačí k tomu drobný, opět

dvoukrokový zákrok, v němž přidělíme bílou barvu pravé straně rámečku první a druhé

buňky záhlaví.

Důležité: Není možné přidělit bílý rámeček pouze buňce ve středním sloupci, neboť ve zhrouceném

modelu rámečku překrývá levý rámeček této buňky je překryt pravým rámečkem buňky v levém sloupci.

Postupujme následovně:

1. V šabloně CSS vytvořme třídu, která bude pravému rámečku elementu th přidělovat

bílou barvu. Třídu můžeme nazvat například bily-ramecek.

.bily-ramecek {

border-right-color: #FFF;

} Všimnout si můžeme toho, že jsme využili vlastnosti border-color, ale pouze pro pravou stranu, proto border-right-color (více o složených vlastnostech na straně 91). 2. Nyní je třeba třídu pomocí parametru class přidělit prvním dvěma buňkám v záhlaví,

a to samozřejmě ve zdrojovém kódu (kód byl jako obvykle zkrácen):

<table>

<tr>

<th class=“doleva bily-ramecek“>Jméno</th>

<th class=“bily-ramecek“>Funkce</th>

<th>E-mail

</tr>

...

</table> Všimněme si toho, že první element th už má přidělenou třídu doleva. To ale ničemunevadí, protože mu můžeme přidělit tříd víc. Stačí udělat mezeru pomocí mezerníku a zapsat název další třídy. Prohlížeč tak na element použije třídy obě. Obrázek 5.16. Vnitřním rámečkům záhlaví jsme přidělili bílou barvu Obrázek 5.16 ukazuje naši fi nální tabulku. Ušli jsme dlouhý kus cesty, ale výsledek myslím stál za to. Co na tabulku říkáte vy?




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2018 - ABZ ABZ knihy, a.s. TOPlist