Vytváříme webové stránky – Seznamy a tabulky (část 5.)

V dnešním díle o vytváření xHTML stránek se budeme věnovat zápisu textu do seznamů a čekoholi do tabulek.

Seznamy
Existuje několik druhů, základní rozdělení je odrážkovaný a číslovaný, zde je příklad:

1
2
3
4
5
6
7
8
9
<ul>
  <li>Odrážka 1</li>
  <li>Odrážka 2</li>
</ul>
 
<ol>
  <li>Číslovaná položka 1</li>
  <li>Číslovaná položka 2</li>
</ol>

Původně byl LI tag nepárový, časem se standardizoval jako párový.
Pokud chceme změnit styl číslování nebo typ odrážky, změní se to atributem type. Pokud ani Disc, Circle a Square nestačí, můžeme pomocí CSS nastavit jako obrázku obrázek vlastní. Příklady:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
  <li>Puntík (nastaven implicitně)</li>
  <li>Prázdné kolečko</li>
  <li>Čtvrereček</li>
</ul>
 
<ol>
  <li>Počítá 1,2,3 ..</li>
  <li>Počítá A,B,C ..</li>
  <li>Počítá a,b,c ..</li>
  <li>Počítá I,II,III,IV,V ..</li>
  <li>Počítá i,ii,iii,iv,v ..</li>
</ol>
 
<ul>
  <li>Moje odrážka</li>
</ul>

Nechceme-li počítat stále od jedničky, existují zde vlastnosti start (od toho začít počítat) a value (pevná hodnota). Value má vyšší prioritu.

1
2
3
4
5
<ol start="2">
  <li>šest</li>
  <li>tři</li>
  <li>čtyři</li>
</ol>

Možná se v souvislosti se seznamy (či definicemi) setkáte i s tagy DL, DD, DT či DIR nebo MENU. Nepovažuji za nutné si je zde uvádět. Co je ale nutné je uvedomit si, že tagy OL a UL pro seznamy se mohou do sebe vnořovat a vytvářet tak víceúrovňové seznamy, ať už číslované, nečíslované, nebo kombinované.

Tabulky

Příklad vykreslení jednoduché tabulky. Kromě textu může obsahovat i jiné objekty, například obrázky, odkazy, případně další tabulky. Uvádím dvě verze, bez a s CSS, ta druhá je ta správnější.

Dá se zde použít atribut width, má zde podobnou funkci jako u obrázků, nastavuje šířku objektu. Stejným způsobem lze použít atribut height. Jenom je třeba si uvědomit, že celková ať už šířka nebo výška se skládá ze součtu vždy z dílčích nejmenších šířek a výšek. Pokud nastavíte větší číslo, tabulka se zvětší, pokud menší, zůstane nejmenší možná velikost. Dají se používat i jiné zápisy velikosti, např. procentuální (width=“90%“, width: 90%;), i když někdy může být toto použití trochu zavádějící.

Atribut border určitě orámování. Atributy width, height, border, ale i spousta dalších by se měla dělat spíše pomocí kaskádových stylů CSS. Nechceme-li vykreslovat rám tabulky, nastavíme border na 0 pixelů.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table width="600" border="2">
  <tr>
    <td width="400">Buňka 1.1 vlevo nahoře</td>
    <td>Buňka 1.2 vpravo nahoře</td>
  </tr>
  <tr>
    <td>Buňka 2.1 vlevo dole</td>
    <td>Buňka 2.2 vpravo dole</td>
  </tr>
</table>
 
<table style="width: 600px;border-width: 2px">
  <tr>
    <td style="width: 400px">Buňka 1.1</td>
    <td>Buňka 1.2</td>
  </tr>
  <tr>
    <td>Buňka 2.1</td>
    <td>Buňka 2.2</td>
  </tr>
</table>

Tipy
Nechceme-li vykreslovat buňku, necháme jí prázdnou: <td></td>. Chceme-li vykreslit prázdnou buňku, použijeme entitu: <td> </td> Pokud někde uvidíte namísto TD tag TH, pak je to hlavičková buňka. Ta se liší od TD tím, že text v ní je tučně a vycentrováno doprostřed.

Slučujeme buňky
I v HTML máme možnost slučovat buňky. Jsou k tomu speciální atributy COLSPAN a ROWSPAN. Jejich vlastnosti jsou čísla, která říkají, kolik buněk chcete sloučit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table style="border-width: 1px">
  <tr>
    <td colspan="2">Nadpis, velká buňka přes 2 sloupce</td>
  </tr>
  <tr>
    <td>Buňka 2.1</td>
    <td>Buňka 2.2</td>
  </tr>
</table>
 
<table style="border-width: 1px">
  <tr>
    <td rowspan="2">Roztáhnuté přes 2 řádky</td>
    <td>Buňka 1.2</td>
  </tr>
  <tr>
    <td>Buňka 2.2</td>
  </tr>
</table>

Layout pomocí tabulek?
Tabulky se mohou vnořovat do sebe. To přivádí na myšlenku, že by se mohly tabulky využít při tvorbě rozvržení stránek (tzv. layotu, kde bude lišta, kde menu, kde hlavní text, patička, apod.). Odpověď je taková, že se to sice dá, ale již tento způsob překonalo rozvržení stránky komplětně dělané v CSS (ohraničení oblastní pomocí DIV nebo SPAN a stylování pomocí CSS).

Další atributy používané v tabulkách

Kolem čeho všeho se má vykreslovat mřížka se dá nastavit pomocí atributu rules. Může nabývat hodnot none, all, rows, cols, groups. Tento atribut nemá výjimečně CSS ekvivalent.

Pro nastavení vnějšího okraje buněk je zde atribut cellspacing. Internet Explorer však míval problém s odpovídajícím CSS stylem border-spacing.

Tyto atributy tagu TABLE by mělo zrychlit vykreslování tabulky (fixed) a z dvojitých rámečků udělat jednoduché (collapse).

1
<table border="1" style="border-collapse: collapse"><tr><td>Buňka</td></tr></table>

Pak existuje ještě spousta atributů tagů, které je dobré naučit se rovnou nahrazené za odpovídající CSS styly. Například cellpadding (vnitřní okraj buněk) se dá nahradit stylem padding, bgcolor (barva pozadí ať už u celé tabulky v tagu table nebo buňky v tagu TD) stylem background-color nebo bordercolor (barva rámečku) stylem border-color. Zápisy barev známe z druhé části seriálu.

Pro vycentrování objektů a textu v buňce je také lepší použít rovnou CSS:

1
2
3
4
<td align="center">Buňka</td>
<td style="text-align: center">Buňka</td>
<td valign="center">Buňka</td>
<td style="vertical-align: center">Buňka</td>

Text-align (možné vlastnosti left/center/right/justify) by měl vycentrovat ve vodorovném směru, vertical-align ve svislém (top/middle/bottom/baseline)

Atributy nejsou uvedeny úplně všechny, ale snad výše zmíněné snad postačí. Zde je příklad na některé z nich:

1
2
3
4
5
6
7
8
9
10
11
12
<table style="border-width: 1px;border-color: red;padding: 2px;width: 650px;height: 450px" cellspacing="3">
  <tr>
    <th colspan="2">Roztáhnuté přes 2 řádky, tučné, uprostřed, s červeným pozadím</th>
  </tr>
  <tr>
    <td style="background-color: yellow" rowspan="2">Žluté pozadí, přes 2</td>
  </tr>
  <tr>
    <td nowrap="nowrap">Nezalamovat řádky, prosím</td>
    <td>Nezalamovat lépe</td>
  </tr>
</table>

Snad je většina možností z příkladu zřejmá. Kdo si chce tabulky cvičit, jen ať cvičí. Někdy to s nimi může být na nervy stejné jako hra Člověče, nezlob se (a pak si člověk všimne nějakého překlepu atp.).

Závěr
Tím bych kapitolu o tabulkách a seznamech považoval víceméně za uzavřenou. Vynechal jsem ještě CAPTION, COL, COLGROUPT, THEAD, TBODY a TFOOT a některé atributy. Především ty, co se už moc nepoužívají a v CSS ty, které si pak ukážeme v kapitole o CSS.

Příště povím narychlo něco o rámech, vkládání objektů. Nevím, buď bude příští článek docela dost krátký nebo k tomu přidám ještě nějaký bonus.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.