TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Tabulky..
Obsah:
Tabulky
Tabulky se na internetu používají ke dvěma účelům:
- pokud potřebujete uspořádat více údajů
- k designu celých webových stránek
Základy
Tabulka se dvěma řádky a dvěma sloupci vypadá takto
| 1.sloupec | 2.sloupec |
| 1.sloupec | 2.sloupec |
A její kód je takový:
<table>
<tr><td>1.sloupec</td><td>2.sloupec</td></tr>
<tr><td>1.sloupec</td><td>2.sloupec</td></tr>
</table>
Pro představu co znamenají jednotlivé tagy:
<table> - párový tag, který končí a začíná tabulku
<tr> - párový tag, který končí a začíná řádek tabulky
<td> - párový tag, který končí a začíná buňku tabulky
Tak to by byl základ. Tyto tagy musí obsahovat KAŽDÁ tabulka.
Pokročilejší tabulky
Lepší tabulka může vypadat takto:
| Nadpis 1. | Nadpis 2. |
|---|---|
| 1. sloupec | 2. sloupec |
| 1. sloupec | 2. sloupec |
Kód této tabulky vypadá takto:
<table border="1" cellpadding="5" cellspacing="4">
<tr><th>Nadpis 1.</th><th>Nadpis 2.</th></tr>
<tr><td>1.sloupec</td><td>2.sloupec</td></tr>
<tr><td>1.sloupec</td><td>2.sloupec</td></tr>
</table>
Objevilo se pár nových tagů:
border - parametr, který určí šířku okraje tabulky (v obrazových bodech)
cellpadding - parametr, který určí vzdálenost mezi písmem a okrajem buňky - vnitřní okraj
cellspacing - parametr, který určí vzdálenost mezi buňkou a okrajem tabulky - vnější okraj
<th>; - párový tag, který ztuční a vycentruje písmo v buňce (hlavička)
Spojování buněk v tabulce
Buňky v tabulce se dají samozřejmě spojovat (jak to jistě znáte z Wordu). Pro příklad:
| Nadpis 1. | Nadpis 2. |
|---|---|
| 1. sloupec | spojený sloupec |
| 1. sloupec | |
| spojený řádek | |
Kód pak vypadá takto:
<table border="1" cellpading="5" cellspacing="4">
<tr><th>Nadpis 1.</th><th>Nadpis 2.</th></tr>
<tr><td>1.sloupec</td><td rowspan="2">spojený sloupec</td></tr>
<tr><td>1.sloupec</td></tr>
<tr><td colspan="2">spojený řádek</td></tr>
</table>
A co způsobí spojení buněk?
| rowspan | parametr, který spojí řádky a to od řádku, v kterém parametr použijete. Spojí tolik řádků, kolik jste u parametru uvedli (v tomto případě 2) |
| colspan | parametr, který spojí sloupce (stejným způsobem jako řádky) |
Styling tabulek
Zatím byly naše tabulky dost fádní a bezbarvé. U tabulek se dají barvit dvě věci. Jednak je to pozadí (buněk, tabulky) a potom okraje. Tak nejdřív pozadí. Určuje se bgcolor, tento parametr se dá určit u kteréhokoliv prvku tabulky (tabulky, řádku a sloupce).
Ukázka:
| text | text |
| text | text |
Kód pak vypadá takto:
<table border="1" bgcolor="green" cellpading="10">
<tr bgcolor="red"><td>text</td><td bgcolor="blue">text</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>
Tady je jasně vidět hierarchie určování barev. Pokud uvedete paramnetr JEN u tagu table bude mít celá tabulka jednu barvu (green). Jakmile uvedete jinou barvu třeba u řádku - bude mít TENTO řádek jinou barvu (red). No a když chcete aby měla tabulka, řádek i buňka jinou barvu stačí určit pozadí i u buňky (blue).
No snad jste to pochopili, kdyžtak si to prozkoušejte!
Úkol
Jako úkol uděláte stránku, na které bude:
- VELMI pestrá tabulka s 5 řádky a 3 sloupci, které budou někde spojené
Příště: formuláře
