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

HTML - 4. lekceHTML - 4. lekce

 

HTML - 4. lekce

Google       Google       1. 9. 2005       20 890×

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 RAD Studio a Windows Store

RAD Studio a Windows Store

RAD Studio je první vývojové prostředí se zabudovanou podporou balení aplikací typu Win32 a Win64 pro jejich umístění a šíření prostřednictvím Windows 10 Store.

Reklama
Reklama
Obrázek ke článku Testujte na 2 400+ Android a iOS zařízení

Testujte na 2 400+ Android a iOS zařízení

V dnešní době, kdy většina softwaru pro mobilní aplikace je tvořena a distribuována průběžně, mnohdy do celého světa je třeba zajistit také průběžnou automatizaci testování mobilního softwaru. V případě mobilních aplikací pro Android a iOS začíná být problém, jak testovat na obrovském množství kombinací HW variant, rozměrů, edic operačních systémů různých výrobců v různých částech světa na reálných zařízení. Simulátory a emulátory nejsou většinou to pravé. Pokud již testuji, jak si udělat vlastní beta distribuci opravdovým reálným testerům napříč platformami?

Obrázek ke článku Funkcie main vo Windows API

Funkcie main vo Windows API

V tretej časti seriálu o Windows API budeme hovoriť o funkčných prototypoch main. Funkčný prototyp je tvorený názvom funkcie a typom signatúry, pričom sa vynecháva telo funkcie. 

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ý