HTML - tabulky(6)
HTML - budeme se zabívat většinou možností tabulek
Použití tabulek
Tabulky se dají využít jako:
- tabulka údajů
- na úpravu(grafickou) stránek, umístění něčeho někam
Použití tabulka na grafickou úpravu nenaplnuje poslání tabulek, ale účel světí prostředky.
Tabulky je velmi široký pojem a dá rozepsat na několik(možná 10 - 15) stránek, proto se budu to snažit udělat stručně a
vypsat jen to nejdůležitější.
Jednoduchá tebulka pro údaje
Vytvoříme jednoduchou tabulku se dvěma řádky a ve dvou sloupcích.
Vysvětlení:
<table> - začíná a končí tabulku
<tr> - začíná a končí řádek
<td> - vytváří buňku párový mezi něj se vkládá text buňky
Takováto tabulka bez ohraničení nemá skoro žádné využití, proto hned přistoupíme k dalšímu příkladu.
Takhle vypadá:
| buňky | buňky | buňky |
|---|
| text | text | text |
| text | text |
Nové tagy a atributy:
<th> - tento tag se může použít namísto <td>, znamená to hlavičkové pole. Obsah by měl být
tučný a zarovnaný na střed. Používání této značky se doporučuje kvůli automatickému zpracování textu.
border - atribut tagu <table>, který nastavuje šířku vnějšího rámečku kolem tabulky (v obrazovkových bodech);
kdyby bylo border="0", nevykreslí se ani vnitřní mřížka
cellpadding - vnitřní okraj buněk (v pixelech), čili vzdálenost textu od rámečku, atribut tagu <table>
cellspacing - vnější okraj buněk (vně rámečku)
Hlavička, spojení buněk
Hlavička tabulky se vytvoří pomocí tagu <caption>Hlavička</caption>, hlavičk aje vlastně
takový nadpis tabulky.
Přílkad:
Zdroj:
<table border="2" cellpadding="5">
<caption>Hlavička</caption>
<tr><td>text</td> <td>text</td></tr>
</table>
Spojený buněk je o něco složitější.
Příklad:
Zdroj:
<table border="2" cellpadding="5">
<caption>Hlavička</caption>
<tr><td>A</td> <td>B</td> <td rowspan="3">C</td> </tr>
<tr> <td colspan="2">D</td> </tr>
<tr> <td colspan="3">E</td> </tr>
</table>
Tabulky se spojují pomocí atributů
rowspan a colspan. Říkají kolik buněk bude buňka zabírat.
Rowspan sloupce a colspan řádky.
Toto by mělo pro zálkady tabulek stačit.
Další možnosti tabulek jsou na
jakpsatweb.
Design pomocí tabulek
Tvořit webdesign pomocí tabulek je sice pěkné, ale pomalu se stahují a vůbec
nesplňují myšlenky tvůrce jazyka HTML. Ale účel světí prostředky. Já osobně to nepoužívám jek sami vydíte
tady jsou použity
rámy. Nebo občas používám CSS layout. Tady je použit jen pro zapati.
Rozležení, zůžení obsahu
Čtenářům může vadit, že jsou stránky široké a špatně se jim to čte(pletou se řádky).
I na toto se dají využít tabulky. Stačí text uzavřít do "jednobuněčné" tabulky.Tabulce se předepíše šířka
(atributem width="šířka v pixelech" u <table> nebo <td>). Potom se bude text zobrazovat ve sloupečku uvedené šířky.
Šířka se nastaví na 400 až 700 pixelů. Aby se nestalo, že nastavíte větší rozměr, než je čtenářův monitor. Tak stačí nastavit
šířku v tagu <td> a ne v <table>.
Zdroj je potom takovýhle:
<table border="1" cellpadding="6" cellspacing="0">
<tr>
<td width="500"><font size="6">Tento text ...</td>
</tr>
</table>
Použití místo rámů
Tabulky se dají použít místo rámů. Může to vypadat nějak takhle:
| Hlavička stránky třeba s logem |
Nějaké odkazy
odkaz
odkaz |
Hlavní text stránky,
který je obvykle
mnohem deląí a ąirąí neľ levý sloupec s odkazy. |
Zdroj:
<table border="2" cellpadding="12" cellspacing="0">
<tr>
<td bgcolor="red" colspan="5">Hlavička stránky třeba s logem</td>
</tr>
<tr>
<td bgcolor="yellow">Nějaké odkazy<br>
odkaz<br>
odkaz</td>
<td>Hlavní text stránky, <br>
který je obvykle <br>
mnohem deląí a ąirąí neľ levý sloupec s odkazy.</td>
</tr>
</table>
Myslím, že je to docela jednoduché, no tak něco trochu těžšího:
Hlavička
|
Levý sloupec
Obsahuje zpravidla
hodně odkazů |
Obsah
Obsah stránky, vlastní text, který je důleľitý.
|
Pravý sloupec
|
Patička
|
Takhle to vypadá ve většině případů použití tabulek pro design.
Zdroj:
<table border="0" cellpadding="6" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#00FFFF">
<h3>Hlavička</h3>
</td>
</tr>
<tr>
<td bgcolor="#C0C0C0" rowspan="2">
<h3>Levý sloupec</h3>
<p>Obsahuje zpravidla</p>
<p>hodně odkazů</td>
<td height="200">
<h3>Obsah</h3>
<p>Obsah stránky, vlastní text, který je důleľitý.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </td>
<td bgcolor="#C0C0C0" rowspan="2">
<h3>Pravý sloupec</h3>
</td>
</tr>
<tr>
<td bgcolor="#00FFFF">
<h3>Patička</h3>
</td>
</tr>
</table>
Tohle je asi lepší udělat pomocí CSS layout. To bude k designu tabulkami vše.
<
>
autor:
Vítězslav Titl
publikováno: 24.10.2004
