Tabulky v HTML5 - část 2

Už jsme viděli, jak vytvořit základní tabulku pouze pro text bez stylů v části 1 tohoto kurzu, ačkoli na úrovni kódu je to v pořádku, na vizuální úrovni nám to neukazuje organizační sílu, kterou může tabulka poskytnout našemu data, Na našich stránkách mnohokrát musíme klasifikovat data, prvky, informace obecně, k tomu můžeme použít dobře sestavenou a reprezentativní tabulku.
Th element
Prvek th nám umožňuje vytvářet záhlaví naší tabulky za účelem vizuální identifikace našich sloupců i td je synem tr. Jeho atributy jsou: colspan, rowspan, rozsah, záhlaví, zastaralé atributy v této specifikaci HTML5 jsou následující: zkrat, osa, zarovnání, šířka, char, charoff, valign, bgcolor, výška a nowrap, rozsahPokud se podíváme podrobně, tento prvek funguje velmi podobně td, jeho konvence CSS je následující:

 th {display: table-cell; vertical-align: inherit; font-weight: bold; zarovnání textu: střed; } 

Nyní se podívejme, jak jej použít k sestavení tabulky s trochu větším formátováním, než jsme dříve dělali:

 Příklad 
 
 
Hodnost
Jam
 
Barva
Velikost
 

 
 
Oblíbený:
 
Jablka
Zelená
Střední
 

 
 
2. oblíbený:
 
Pomeranče
oranžový
Velký
 

 
 
3. oblíbený:
 
Granátové jablko
Jakási zelenočervená
 
Liší se od střední po velkou
 

 

 

Jak jsme v tomto příkladu viděli, můžeme prvek umístit th v rámci tr, jeho funkce je podobná td, pouze to, že se používá ke generování záhlaví, nám ukázaný kód ve výsledku poskytuje následující tabulku:

Naše tabulka začíná vypadat mnohem lépe, nicméně je stále velmi základní a informace nejsou tak jasné, jak by měly být, například záhlaví a obsah neodpovídají v dobrém slova smyslu a vizuálně je obtížné rozlišit, které Patří k tomu, protože Budeme používat CSS a uvidíme, jak tuto situaci do značné míry vyřešíme.
K tomu použijeme následující:

Máme pro to dvě podmínky thoba začínají tím, že nám říkají, že jsou dětmi trPrvní však umístíme, že jeho zarovnání bude doleva, bude mít bílá písmena a pozadí bude šedé, ve druhém označíme, že když pro každé tr existuje pouze jedna th, zarovnáme jej doprava , umístíme světlejší šedé pozadí a písmena budou tmavší šedá.
Podívejme se na výsledný kód:

 Příklad [b] [/ b] 
 
 
Hodnost
Jam
Barva
Velikost
 

 
 
Oblíbený:
Jablka
Zelená
Střední
 

 
 
2. oblíbený:
Pomeranče
oranžový
Velký
 

 
 
3. oblíbený:
Granátové jablko
Jakási zelenočervená
 
Liší se od střední po velkou
 

 

 

Nyní se podívejme na výsledek tohoto kódu a všimneme si, jak je takto naše tabulka mnohem organizovanější a můžeme rozlišit, do kterého sloupce jednotlivá data patří.

Jak vidíme, tento příklad nám dává vizi toho, jaký by měl být stůl, nicméně k dokonalosti má stále daleko. Co by se například stalo, kdybychom přidali další th, v řádku s informacemi? Přišli bychom o formát, což by nás přimělo pracovat pokaždé, když tabulka změní svou strukturu.
Abychom tomu zabránili, existují 3 prvky, které logicky rozdělují tabulku, abych tak řekl, jsou to tyto: Thead, tbody, tfoot. S tím, co jsme viděli, jsme schopni porozumět bez velkého teoretického vysvětlování, přejděme tedy k praktickému příkladu.

 Příklad 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Hodnost
Jam
Barva
Velikost
 

 
 
Hodnost
Jam
Barva
Velikost
 
 
Oblíbený:
Jablka
Zelená
Střední
 

 
 
2. oblíbený:
Pomeranče
oranžový
Velký
 

 
 
3. oblíbený:
Granátové jablko
 
Jakási zelenočervená
Liší se od střední po velkou
 

 

 

 

Nyní se podívejme na výsledek tohoto:

Jak vidíme, je to v podstatě první věc, kterou jsme udělali, nyní ve spodní části tabulky vidíme, že máme záhlaví stejně, ale v kódu jsme viděli, jak jsou to dvě různé struktury, stejně jako obsah.
Tímto ukončíme náš výukový program tabulek HTML5, stačí nám udělat pár cvičení a procvičit to, co jsme se naučili.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod