HTML II. – 3. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

HTML II. – 3. lekceHTML II. – 3. lekce

 

HTML II. – 3. lekce

Google       Google       14. 4. 2006       23 730×

Obsah lekce 3

  • 3.1 Tabulky – Základní
  • 3.2 Tabulky – Pokročílé
  • 3.3 Tabulky – Ostatní
    • 3.3.1 – Sloučení buněk tabulky
    • 3.3.2 – Obarvení pozadí tabulky
  • 3.4 Domácí úkol

Reklama
Reklama

3.1 – Tvorba základních tabulek

Celá tabuka se musí uzavřít do párového tagu <TABLE> a </TABLE>. To je důležité, ale potom jsou další tagy, které musí prohlížeči říci, jak má udělat řádky a sloupce. K tomuto účelu slouží tyto tagy, všechny párové:

<TR> a </TR>
Tyto tagy začínají a zakončují řádek a jejich obsah se pak dělí na buňky.
<TD> a </TD>
Tyto tagy začínají a ukončují jednu buňku v řádku.
<TH> a </TH>
Tyto tagy udělají speciální buňku. Dávájí se obvykle do prvního řádku tabulky, používají se pro nazvání toho, co obsahují další buňky pod nimi. Tyto tagy nejsou povinné.

Doporučení: Pokud každý řádek tabulky napíšete na zvláštní řádek v HTML kódu, nemůžete se v kódu ztratit.

Na závěr této části lekce uvedu příklad:


Internet:
<TABLE> <TR><TH>ADSL</TH><TH>Wifi</TH></TR> <TR><TD>Po drátě</TD><TD>Vzduchem</TD></TR> </TABLE>

Tento příklad udělá toto:

Internet:
ADSLWifi
Po drátěVzduchem

3.2 – Tvorba pokročilejších tabulek

A máme jednoduchou tabulku. Ale ještě není dokonalá, například nemá žádné okraje. Proto nám poslouží další parametry, které se přidávají k tagu <TABLE>. Jsou to tyto:

Další parametry tabulek
Parametr Hodnota parametru Význam hodnoty
border číslo (v px) tloušťka okraje (0 = žádný)
cellpading číslo (v px) Vzdálenost písma a okraje buňky
cellspacing číslo (v px) vzdálenost buňky od okraje tabulky

Tímto jsme vylíčili některé parametry a jejich hodnoty. Nyní je použijeme v praxi.

Uděláme si jednoduchou tabulku 2×2 + nadpis:


<TABLE border="1" cellpading="1" cellspacing="1">
<TR><TH>Prohlížeč</TH><TH>Oblíbenost</TH></TR>
<TR><TD>Mozilla Firefox</TD><TD>5/10</TD></TR>
<TR><TD>Microsoft Internet Explorer</TD></TR>

A tady máme výsledek:

ProhlížečOblíbenost
Mozzila Firefox5/10
Microsoft Internet Explorer4/10

Jak jste zjistili z příkladu, tag <TH> písmo také zarovná na střed. Aby bylo i ostatní písmo zarovnané na střed, stačí zadat k tagu <TABLE> parametr align s příslušnou hodnotou (viz lekce Formátování textu). Tímto jsme vytvořili pokročilejší tabulku, jinak řečeno tabulku, která už vypadá lépe.

3.3 – Tvorba ostatních věcí do tabulky

3.3.1 – Sloučení buněk tabulky

Tato věc je praktická, pokud chcete dvěma řádkům přiřadit v jednom sloupci jen jednu hodnotu. Zde je důležité si uvědomit další fakt – rows = řádky, cols = sloupce.

Důležité je, zapamatovat si to! Budeme to potřebovat v dalších lekcích.

Kód pro sloučení dvou buněk je takovýto:


<TABLE border="1" cellpading="1" cellspacing="1">
<TR><TH>Prohlížeč</TH><TH>Oblíbenost</TH></TR>
<TR><TD>Mozilla Firefox</TD><TD rowspan="2">5/10</TD></TR>
<TR><TD>Microsoft Internet Explorer</TD></TR>

Výsledek:

ProhlížečOblíbenost
Mozilla Firefox5/10
Microsoft Internet Explorer

Jak jste asi zjistili, když se parametru span přidá předpona col nebo row, tak něco sloučí. Když zadáte tedy rowspan, sloučí x (x = hodnota) řádků ve sloupci. Když zadáte colspan, sloučíte sva sloupce v jednom řádku.

3.3.2 – Obarvení pozadí tabulky

Toto je věc naprosto jednoduchá. Stačí dodat k tagu <TABLE> hodnotu bgcolor s hodnotou barvy v angličtině. Ano, je to stejný parametr, jaký se dává do tagu <BODY>, pokud chcete obarvit pozadí stránky.

3.4 – Domácí úkol

Udělejte zdrojový kód stránky se smysluplnou tabulkou 3×3 + nadpis, která bude mít oranžové pozadí a někde spojené řádky a sloupce.



Příště:
Příště se začneme věnovat obrázkům a vytvoříme první odkazy.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

4 názory  —  4 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Radek BoudaRadek Bouda studuje na Fakultě aplikovaných věd Západočeské univerzity v Plzni. Programuje v jazyce Java a zajímá se platformu .NET. Kromě programování má rád také cyklistiku, volejbal, skauting a pohyb venku obecně.
Web     Twitter     Facebook    

Nové články

Obrázek ke článku Blockchain & Bitcoin konference

Blockchain & Bitcoin konference

V pátek 19. 5. 2017 se v pražském konferenčním centru Andel’s konala Blockchain & Bitcoin konference. Řada odborníků a podnikatelů v oboru blockchainu a kryptoměn představila možnosti budoucího směřování tohoto oboru. Speakeři většinou rusky mluvící provenience prezentovali řešení svých firem založená na technologii blockchainu.

Reklama
Reklama
Obrázek ke článku Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Bezpečnostní tým Cisco Talos odhalil celkem 4 kampaně dosud neobjeveného malwaru, který dostal jméno KONNI. Ten se dokázal úspěšně maskovat od roku 2014. Zpočátku se malware zaměřoval pouze na krádeže citlivých dat. Za 3 roky se ale několikrát vyvinul, přičemž jeho současná verze umožňuje útočníkovi z infikovaného počítače nejenom krást data, ale i mapovat stisky na klávesnici, pořizovat screenshoty obrazovky či v zařízení spustit libovolný kód. Pro odvedení pozornosti oběti zasílali útočníci v příloze také obrázek, zprávu a výhružkách severokorejského režimu či kontakty na členy mezinárodních organizací.

Obrázek ke článku Pouze jedna z deseti lokálních firem ví o pokutách plynoucích z GDPR

Pouze jedna z deseti lokálních firem ví o pokutách plynoucích z GDPR

Trend Micro, celosvětový lídr v oblasti bezpečnostních řešení a VMware, přední světový dodavatel cloudové infrastruktury a řešení pro podnikovou mobilitu, oznámily výsledky výzkumu mezi českými a slovenskými manažery zodpovědnými za ochranu osobních údajů, který zjišťoval, jak jsou připraveni na nové nařízení o ochraně osobních údajů (GDPR). Většina firem v České republice a na Slovensku nad 100 zaměstnanců je již s novým nařízením GDPR obeznámena. Výzkum provedený ve spolupráci s agenturou Ipsos ukázal, že téměř 8 firem z 10 o nařízení ví, přičemž jeho znalost je o něco vyšší na Slovensku (89 %) než v České republice (69 %).

Obrázek ke článku Vyděračský software Locky se vrací, tváří se jako potvrzení platby, odhalil tým Cisco Talos

Vyděračský software Locky se vrací, tváří se jako potvrzení platby, odhalil tým Cisco Talos

Jeden z nejznámějších ransomwarů, Locky, se vrací. Po většinu roku 2016 patřil mezi nejrozšířenější vyděračské softwary. Ke svému šíření využíval emailové kampaně s infikovanými přílohami. Ransomware Locky byl rozesílán prostřednictvím botnetu (internetový robot zasílající spamy) Necurs. Jeho aktivita na konci roku 2016 téměř upadla a spolu s ní i šíření ransomwaru Locky. Před několika týdny se Necurs opět probudil a začal posílat spamy nabízející výhodný nákup akcií. Dne 21. dubna zaznamenal bezpečnostní tým Cisco Talos první velkou kampaň ransomwaru Locky prostřednictvím botnetu Necurs za posledních několik měsíců.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý