Ačkoliv tabulky nikdy nebyly myšleny jako nástroj pro pozicování prvnků a úpravu vzhledu webu, stalo se a dlouhá léta byly a dnes stále jsou používané pro umístění textu, obrázků, či pozadí stránky a pomáhají tak dosáhnout k autorově představě o grafice webu.

Dnes již profesionál místo tabulek využívá CSS a obvzláště CSS 3 slibuje absolutní volnost. Bohužel si chvilku ještě počkáme na plnou podporu ze strany prohlížečů.

TABLE je tag párový a musí být vždy uzavřen! Pokud tomu tak není, nezlze očekávat nějaký slušný výsledek.

<table border=1 width=500 bgcolor=black bordercolor=yellow background=image.jpg summary=moje tabulka align=center>

border=1
Známe - určí tloušťku rámečku. Při hodnotě 0 není zobrazen.

width=500
Také nic nového - šířka celé tabulky v pixelech, nebo procentech. Procenta musí být vždy v uvozovkách! Měl by tu být i atribut height, kterým stejně určíte výšku tabulky, ale já ho nepoužívám, neb s ním nikdy nedosáhnete valididních stránek.

bgcolor=black
Barva pozadí tabulky. Stejně jako v tagu body můžete zadat jméno zname barvy, nebo kód (#FF00CC). Pokud tento atribut vůbec nepoužijete, bude pozadí tabulky stejné jako pozadí celé stránky.

bordercolor=yellow
Pro změnu barva rámečku. Nevím jak to snáší prohlížeče, pokud chcete pouze pozicovat, tak vám to je jedno - tabulku budete mít asi vždy bez rámečku.

background=image.jpg
Jako pozadí tabulky lze použít i obrázek.

summary=moje tabulka
Text, který je zde uveden je použitelný pro nevidomé. Můžete tam napsat třeba omluvu, že si vaše stránky kvůli tabulce nepřečtou.

align=center/left/right
Zarovnání celé tabulky - stejné jako jinde.

Atributů v TABLE je o něco víc, ale je spíše s nimi více problémů. Pokud vás moc zajímají, tak se podívejte na stránky jakpsatweb.cz.

Samozřejmě nesmíte zapomenout uzavřít tag </table> Právě o obahu mezi prvním tagem <table> a </table> budou následující řádky

Jak ale uděláme samotný vnitřek?

Uděláme ho pomocí dalších tagů, kterými prohlížeči řekneme, kde chceme řádek a kde sloupec.

<tr>
Tag TR nám určí řádek. Funguje i nepárově, ale opravdu vřele doporučuji jej uzavírat a to vždy. Stejně tak zkousne i zadání BGCOLOR, HEIGHT apod. ale to také dnes již nedoporučuji.

Následující tag bude právě mezi <tr> a </tr>

Ten následující tag je <td> který určuje buňky a de facto sloupce tabulky.

<td width=100 valign=top bgcolor=black>

Tak snad jenom ty neznámé:

width=100
Šířka buňky, ale zároveň všech buněk ve sloupci, čili celého sloupce. Pokud do takové buňky vložíte obrázek o velikosti 120, sloupec se roztáhne na šířku obrázku.

valign=top
Toto používám hodně. Jedná se o zarovnání obashu buňky. V tomto případě bude třeba text úplně nahoře v buňce. Standardně se zarovnává doprostřed. Jiné hodnoty jsme již probírali dříve.

rowspan=2
Z excelu známé sloučení buňek. Kdo z vás dělal s FRAMES zná ROW a COL dobře. Tento atribut sloučí buňky v jednom sloupci. Uvedená hodnota řekne, kolik buněk bude sloučeno. Ukážeme si na konci článku.

colspan=2
Opak ROWSPANu akorát, že jde o sloučení buněk v horizontálním podání.

Musíme nakonec uzavřít i ten nejvnořenější tag TD <td> Zde může být obsah stránky - obrázek, text, cokoli, co jste potřebovali pouze zarovnat. Dokonce zde může být i další tabulka. </td>

Někdo by mohl namítat, že by zde měli ještě být jiné tagy, např. TH, který udělá také jenom buňku, ovšem je chápána jako hlavička a text je v ní rovnou snad tučný. Vždy jsem se bez nich obešel.

Konečně u konce

Věřím, že vy, co s HTML teprve začínáte a doma si bastlíte svou první stránku musíte mít teď hlavu jako meloun a proto následuje pouze sada ukázek.

Na začátku jsme měli tag TABLE který nám udával pouze tabulku. Pokud by jsme použili pouze to, tak dostaneme sice tabulku, ale ta bude mít jenom 1 sloupec a 1 řádek - čili jednu buňku.

<table border=1 width=200 height=250 align=center>

Teď musíme zadat, kolik chceme řádků. V našem případě postačí 1

<tr>

Teď prohlížeč ví, že jsme začali tabulku a je v ní jeden řádek. A do tohoto řádku vložíme už samostatné buňky:

<td> první buňka</td> a <td> druhá buňka</td>

Text "první buňka" a "druhá buňka" zastupuje obsah, který chceme pozicovat. Teď to zase všechno musíme uzavírat. Tag TD už uzavřený máme rovnou na řádku, kde i začal.

</tr>

Tím jsme uzavřeli řádek - prohlížeči je jasné, že v tomto řádku zatím žádná další buňka nebude.

</table>

No a tím jsme zase zavřeli tabulku a můžeme pokračovat dál na stránce. Výsledek by měl vypadat asi takto:

První buňka

Druhá buňka

Struktura tabulky v kódu
Upravování tabulek, či samotná tvorba může někdy dělat trochu paseky, tak je lepší si udržovat v kódu pořádek. Když ne jinde, tak v kódu tabulky určitě.

Můžeme si ukázat, jak by naše tabulka vypadala, kdyby měla řádky 2 a ještě k tomu by jsme jí trochu obarvily.

První buňka	Druhá buňka
První buňka	Druhá buňka

Samotné buňky teď rozeznáme pouze podle barev, protože jsme uvedli border=0 a tak není vidět. Mezera po něm ovšem zůstala. Je lepší jí odstraňovat skrze CSS. Kód naší tabulky vypadá asi takto:


<table border=0 width=200 height=100 align=center>

<tr>

 <td bgcolor=red>První buňka</td>

 <td bgcolor=green>Druhá buňka</td>

</tr>

<tr>

 <td bgcolor=blue>První buňka</td>

 <td bgcolor=yellow>Druhá buňka</td>

</tr>

</table>

Jako poslední příklad si ukážeme sloučení buněk, neb to někdy dělá potíže.

SLOUČENO POMOCI COLSPAN=2
První buňka	Druhá buňka

Na kódu níže můžeme vidět, že nejde o klasické sloučení buněk jako v Excelu, ale spíše o roztáhnutí jedné buňky přes druhou, protože červená buňka překryla prostor zelené a ta je z kódu vyškrtnuta úplně.


<table border=0 width=200 height=100 align=center>

<tr>

 <td bgcolor=red colspan=2><b>SLOUČENO POMOCI COLSPAN=2</b></td>

 <!-- ZDE BYLA ZELENA BUNKA -->

</tr>

<tr>

 <td bgcolor=blue>První buňka</td>

 <td bgcolor=yellow>Druhá buňka</td>

</tr>

</table>

To by ode mne bylo asi všechno. O tabulkách se toho můžete mnohem více dozvědět na již zmiňovaném jakpsatweb.cz. Neměl jsem v úmyslu vám zde předhodit vše, stačilo, když jsem udělal výběr a patrně stejně bude chvilku trvat, než všemu přijdete na kloub.

Pamatujte, že vše v tabulce by mělo být uzavřené koncovým tagem a pokud se chcete webu věnovat více, než pro vytvoření stránky svého pejska, tak pomalu začněte uvažovat o CSS, které vám nabízí mnohem více možností, co se pozicování týče.
Autor: El Carlos

Štítky: HTML

Facebook Twitter Topčlánky.cz Linkuj.cz

Sdílet