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

HTML - 4. lekceHTML - 4. lekce

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín

HTML - 4. lekce

Google       Google       1. 9. 2005       21 513×

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 První český hackathon ve vlaku inspirovaly služby jako  Tinder, Airbnb nebo Uber

První český hackathon ve vlaku inspirovaly služby jako Tinder, Airbnb nebo Uber

Patnáct set kilometrů, cesta přes dva státy, šestnáct hodin programování a přísun energy drinků, tak by se dal shrnout unikátní hackathon ve vlaku pořádaný Kiwi.com. Z Prahy do Košic a zpět se svezlo celkem 13 týmů, každý s originálním nápadem. Hlavní výhru, voucher na letenky v hodnotě 2 500 EUR, si v Praze převzal tým až z Ukrajiny.

Reklama
Reklama
Obrázek ke článku Gamifikace nakupování dorazila i do České republiky

Gamifikace nakupování dorazila i do České republiky

Zákazníci zejména retailových společností jsou často znuděni klasickými věrnostními či motivačními programy. Většinou z toho důvodu, že jsou jeden jako druhý a nepřináší nic nového. Ale i v České republice se projevují zahraniční trendy, nedávno zde totiž vstoupila na trh a rychle se uchytila nová platforma kombinující to nejlepší z věrnostních a motivačních programů, která navíc využívá prvky gamifikace – Rondo.cz. Na hlavní milníky vývoje nálad a motivace zákazníků a nejnovější trendy se zaměřil Jan Hřebabecký, spoluzakladatel Rondo.cz

Celý článekGoogle2. listopadu 2017PR
Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý