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

HTML - 4. lekceHTML - 4. lekce

 

HTML - 4. lekce

Google       Google       1. 9. 2005       21 048×

Tabulky..

Reklama
Reklama

Obsah:

  1. Tabulky
  2. Úkol

Tabulky

Tabulky se na internetu používají ke dvěma účelům:

  1. pokud potřebujete uspořádat více údajů
  2. k designu celých webových stránek

Základy

Tabulka se dvěma řádky a dvěma sloupci vypadá takto

1.sloupec2.sloupec
1.sloupec2.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. sloupec2. sloupec
1. sloupec2. 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. sloupecspojený 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:

texttext
texttext

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

×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.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Ondřej ŠateraOndřej se zajímá o tvorbu webů, návrh a implementaci webových aplikací. Studuje v Praze na ČVUT a pracuje u společnosti Emotion design s.r.o
Web     Twitter    

Nové články

Obrázek ke článku Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií do mobilů či notebooků upouštějí od letecké přepravy zboží. V letošním roce plánují dovézt až 80 % produktů lodí. Přitom před 5 lety byla většina baterií do mobilních přístrojů dovezených do České republiky přepravována letadlem. Za proměnou způsobu transportu akumulátorů stojí zpřísnění pravidel pro leteckou přepravu, která přinášejí vyšší náklady i náročnou agendu.

Reklama
Reklama
Obrázek ke článku JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá první nonstop veřejně dostupnou digitální dílnu světového formátu s vybavením za 3 miliony korun. Dílnu může využívat po registraci kdokoliv. V  prostorách vzniknou prototypy produktů místních startupů, projekty kutilů a studentů i umělecká díla. Cílem dílny je zpřístupnit veřejnosti drahé přístroje a přitáhnout více podnikavých lidí k technickým oborům.

Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

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ý