K vytvoření tabulek potřebujeme 4 párové značky:
<table >= Ohraničují začátek a konec tabulky
<tr>= Značí jednotlivé řádky tabulky
<th>= Nadpis tabulek
<td>= Data tabulky
Do tabulek lze napsat cokoliv: Text, Čísla, Odkazy či dokonce další tabulky
Poznámka: Zde opravdu doporučuji dělat logické mezery
(kód je poté mnohem čitelnější a lépe se v něm hledají případné chyby)
Kód:
Výsledek:
Hmmm... Takhle to moc jako tabulka nevypadá že? Přidáme tomu tedy trochu tvar:
K tomu použijeme funkci "border", použijeme ji ve značce <table>
(Tloušťku stěn si můžete nastavit jakoukoliv, já tam mám ku příkladu "1px"= "1 pixel")
Kód:
Výsledek:
Ještě celou tabulku posuneme na střed ať to vypadá lépe:
K tomu nám poslouží funkce "align", kterou také použijeme ve značce <table>
Kód:
Výsledek:
A už to vypadá jako tabulka profesionála
V tabulkách se toho však dá dělat mnohem více
Můžeme ku příkladu změnit zarovnání textu uvnitř tabulek, vzdálenost textu od hranic tabulek, barvu jednotlivých polí či celé tabulky
Všechny příklady co jsem tady uvedl vám ukážu
K této změně nám pomůže opět funkce "align", tentokrát je ale na nás kde ji použijeme
Já ji pro příklad užiji pro zarovnání umístění na střed, tudíž napíšu funkci "align" ke všem značkám s pořadím
Kód:
(Předtím a potom)
Pokud chceme mít mezi jednotlivými polemi více místa, musíme použít funkci "cellspacing", přijde do <table>(pro celou tabulku)
Kód:
Výsledek:
(Použil jsem velikost "0" pro ztracení těchto mezer)
Ke změně tohoto parametru musíme využít funkci "cellpadding", také přijde do <table>(pro celou tabulku)
Kód:
Výsledek:
Poznámka: Psát za čísla "px" (pixely) je dobrovolné
Poslední funkce co se v tomhle díle naučíme je funkce "bgcolor" , dá se použít do všech značek tabulky
Pokud použijeme tuto funkci ve značce <table>, zbarví se celá tabulka do dané barvy
!Pokud však nastavíte již jinou barvu např. do určitého řádku či pole, tato funkce vyhraje!
Kód:
Výsledek:
Pokud chceme dát tabulce správný nadpis, použijeme párovou značku <caption>
Zde lze připat i atribut "align", hodnoty má dvě:
top: Nadpis se zobrazí nad tabulkou
bottom: Nadpis se zobrazí pod tabulkou
Kód:
Výsledek:
Už jsme se naučili zarovnávat text hotizontálně (levo, pravo, střed), nyní se naučíme text zarovnávat vertikálně(na vrchu, na dně uprostřed, společně)
K tomuto nám pomůže atribut "valign"
Do toho atributu můžeme napsat tři hodnoty=
"top"(obsah bude nalepen na vrchní straně pole)
"middle"(obsah bude uprsotřed tabulky vzhledem k vrch spodní straně pole)
"bottom"(obsah bude sedět na spodní straně pole)
Kód:
Výsledek:
K tomuto úkonu použijeme dva atributy:
Pro výšku "height"
Pro šířku "width"
Kód:
Výsledek:
Pokud bysme chtěli využít výšku a šířku pro řádek, který by tak změnil tyto hodnoty pro celé sloupce, musíme použít následující:
Kód:
Výsledek:
(Všimněte si, že výšku jednotlivých polí můžeme upravovat pokaždé, zatímco šířku můžeme nastavit pouze jednou)
Určitě jste si už někdy všimli, že třeba dvě buňky nad sebou byli spojené dohromady
Buňky můžeme spojovat jak v řádcích, tak ve sloupcích
Ke spojování buňek ve sloupcích použijeme atribut colspan= "(počet spojených buněk)"
Kód:
Výsledek:
Ke spojování buňek ve sloupcích použijeme atribut rowspan= "(počet spojených buněk)"
Kód:
Výsledek:
(Atribut "rowspan" je vcelku složitý, proto je pro jeho pochopení nejlepší zkoušet různé kombinace,
abyste plně pochopily tu logiku jak to přesně funguje)
Jak jsem na začátku řekl, do tabulky lze vkládat vskutku cokoliv, nejsložitější je však asi tabulka v tabulce, proto vám to zde ukážu
Kód:
Výsledek:
Pokud chcete mít pole prázdné, vložte dovnitř toto: &.nbsp(bez té tečky)
I obrázky se dají vkládát do tabulek, dokonce společně s textem, podívejte se, jak to vypadá
Kód:
Výsledek:
V dalším díle si ukážeme vkládání videa