9. listopadu 2011 16:32

8. díl - Tabulky

V minulém článku jsme se dozvěděli, na co jsou seznamy a dnes si povíme něco o tabulkách. Tabulky většinou poznáte tak, že mají ohraničení a v jejich buňkách je text zarovnán vertikálně na střed. Nemusí to ale platit.

Tabulka - <table>

Tabulky můžete využít nejen pro vytvoření klasické tabulky, ale třeba když je potřeba někam něco umístit, aby to hezky vypadalo, jako například text k formulářovým polím (o formulářích si budete moct přečíst v 11. díle). Její zápis je velmi jednoduchý. Tabulka je párová a začnete ji značkou <table>.

Vlastnosti značky <table>

Tabulka může mít mnoho vlastností, já uvedu jen ty nejdůležitější z nich:

Vlastnost Význam Hodnoty
border šířka ohraničení buňek pixely
align zarovnání tabulky left, center, right
width šířka tabulky pixely nebo procenta
height výška tabulky pixely nebo procenta
cellspacing vnější okraj buněk pixely
cellpadding vnitřní okraj buněk pixely
background obrázek na pozadí URL
bgcolor barva pozadí barva
bordercolor barva ohraničení barva

Řádek tabulky - <tr>

Co by to bylo za tabulku bez řádků. Řádky tabulky zapíšete pomocí značky <tr>. Tato značka je stejně jako všechny značky tabulky párová. Tato značka smí být pouze uvnitř značky <table> a může obsahovat jen buňky (<td> a <th>).

Vlastnosti značky <tr>

Řádek tabulky může mít 3 vlastnosti: height, background a bgcolor. Tyto vlastnosti mají stejný význam a stejné hodnoty jakon u vlastnosti u značky <table>.

Buňka tabulky - <td> a <th>

Buňky mohou být 2: <td> a <th>. Žádný velký rozdíl mezi nimi není, pouze se text v <th> bere jako hlavička, je vycentrovaný a tučný. Obě značky jsou párové. Buňky se mohou vyskytovat pouze v řádku tabulky. Naopak v buňkách se může vyskytovat úplně cokoliv (odstavce, odkazy, seznamy, tabulky, ...).

Vlastnosti značek <td> a <th>

Tyto značky mají stejné vlastnosti, jako jsou vlastnosti samotné tabulky, jen pár vlastností v tabulce je navíc:

Vlastnost Význam Hodnoty
align horizontální zarovnání obsahu left, center, right, justify
valign vertikální zarovnání obsahu top, middle, bottom, baseline
nowrap obsah se nebude zalamovat žádné

Příklad jednoduché tabulky

Nyní si ukážeme nějaký příklad tabulky:

<table border="3" bgcolor="#FF0">
<tr bgcolor="#F90">
<th>Díl</th>
<th>Název dílu</th>
<th>Co se naučíte</th>
</tr>
<tr>
<td align="center">1.</td>
<td>Ahoj světe</td>
<td>Napsat jednoduchou stránku</td>
</tr>
<tr>
<td align="center">2.</td>
<td>Publikování na webu</td>
<td>Založit web a nahrát stránku.</td>
</tr>
</table>

Výsledek:

Díl Název dílu Co se naučíte
1. Ahoj světe Napsat jednoduchou stránku
2. Publikování na webu Založit web a nahrát stránku.

Slučování buněk

Poslední, na co se dnes podíváme je slučování buněk. To se provádí vlastností colspan, což je přesah buňky do x dalších sloupců, nebo vlastností rowspan, která znamená přesah buňky do x dalších řádků. Ukážeme si malý příklad:

<table border="1">
<tr>
<td colspan="2">A B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">D<br>G</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>H</td>
<td>CH</td>
</tr>
</table>

Výsledek:

A B C
D
G
E F
H CH

Co nás čeká příště

Po dnešku by jste měli umět vytvářet a stylovat tabulky. V příštím článku se s Víčkem podíváte na grafickou stránku HTML a to na obrázky.

Hodnocení

Celkové hodnocení
5 hlasů
Vaše hodnocení
Vyberte počet hvězdiček

Komentáře

Jméno:
Předmět:
Komentář:
  :):-|:P:D;):(8)[evil][arrow][idea][?][!]
Kontrola:
Žádné komentáře.
© 2011 - 2017 SuperMartas a Tomáš Hypeš