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       20 667×

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 Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý