V této lekci se seznámíme s HTML tabulkami. Naučíme se tvořit jednoduché i složitější tabulky, řekneme si jaké tagy se při tvoření tabulek používají a také jak lze tabulky využít.

Původně byly tabulky předurčeny pouze pro prezentování tabulkových dat. Přestože se pro tento účel používají i dnes, spousta tvůrců webových stránek je používá také pro rozložení webových stránek. To je pravděpodobně způsobeno tím, že HTML má omezené schopnosti rozložení.

Každopádně ať už používáte tabulky pro prezentaci tabulkových dat nebo pro rozložení stránek, budete používat stejné HTML tagy.

Zakladní tagy

Každá HTML tabulka obsahuje minimálně tyto 3 tagy: <table><tr> a <td>. Samozřejmě existují i další tagy. Pro žačátek nám však postačí tyto 3 a nyní se na ně podíváme podrobněji.

Tag <table>

HTML tag <table> vyznačuje začátek a konec tabulky. Tento párový tag je povinný.

Příklad:

<table border="1">
<tr>
<td>Buňka 1</td>
<td>Buňka 2</td>
</tr>
</table>

Všimněte si, že jsme přidali atribut border, jenž definuje šířku rámečku.

Výsledek:

Buňka 1 Buňka 2

Atributy tagu <table>

Seznam atributu, které lze použít u tohoto tagu naleznete zde. Spousta těchto atributů je však zastaralá, proto doporučujeme, tam kde to jde, použít CSS styly.

Tagy <tr> a <td>

Pomocí HTML tagu <tr> jsou tvořeny jednotlivé řádky tabulky. Jednotlivé buňky jsou tvořeny tagem<td>.

Příklad:

<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td width="30%">Buňka 1</td><td>Buňka 2</td>
</tr>
</table>

Výsledek:

Buňka 1 Buňka 2

Záhlaví tabulky

Spousta tabulek má své záhlaví pro sloupce nebo pro řádky. V HTML se používá tag th.

Většina prohlížečů zobrazí záhlaví tučně a zarovnané na střed .

Příklad:

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th>Záhlaví tabulky</th>
<th>Záhlaví tabulky</th>
</tr>

<tr>
<td width="30%">Buňka 1</td><td>Buňka 2</td>
</tr>
</table>

 

Výsledek:

Záhlaví tabulky Záhlaví tabulky
Buňka 1 Buňka 2

Atribut Colspan

Atribut colspan můžete použíty, aby jedna buňka zahrnovala více sloupců.

Příklad:

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Záhlaví tabulky</th>
</tr>
<tr>
<td width="30%">Buňka 1</td><td>Buňka 2</td>
</tr>
</table>

 

Výsledek:

Záhlaví tabulky
Buňka 1 Buňka 2

Atribut Rowspan

Atribut rowspan má stejnou funkci jako atribut colspan, pouze s rozdílem, že slouží pro více řádků v jedné buňce.

Příklad:

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Záhlaví tabulky</th><td>Buňka 1</td>
</tr>
<tr>
<td width="70%">Buňka 2</td>
</tr>
</table>

 

Výsledek:

Záhlaví tabulky Buňka 1
Buňka 2

Barvy v tabulkách

Ve Vašich tabulách můžete použít barvy pomocí jednoduchého CSS stylu. Barvy můžete použít např: pro rámeček, jednotlivé řádky nebo sloupce, popříbadě buňky.

Příklad:

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>
<th style="color:lime;background-color:green;" rowspan="2">
Záhlaví tabulky</th><td style="text-align:center;color:red;
background-color:yellow;">Buňka 1
</tr>
<tr>
<td style="text-align:center;color:yellow;background-color:red;">Buňka 2</td>
</tr>

</table>

Vlož sem text.
Vlož text
Vlož text
Vlož text
Vlož text
1 2
3 4
1 2 3
4 5 6
1 2 3
4 5 6
7 8 9 10
11
1 2
3
1 2
3
Hlavný nadpis
Podnadpis1 Podnadpis2
1 2
   
1
 
1. řádek, 1. buňka 1/2. řádek, 2. buňka 1. řádek, 3/4. buňka
2. řádek, 1. buňka 2. řádek, 2. buňka 2. řádek, 3. buňka
3. řádek, 1.buňka 3. řádek, 2. buňka 3. řádek, 3. buňka 3. řádek, 4. buňka
4. řádek, 1. buňka 4. řádek, 2. buňka 4. řádek, 3. buňka 4. řádek, 4. buňka
 
1 2 3 4
5 6 7 8
 
1. řádek, 1. buňka 1/2. řádek, 2. buňka 1. řádek, 3/4. buňka
2. řádek, 1. buňka 2. řádek, 2. buňka 2. řádek, 3. buňka
3. řádek, 1.buňka 3. řádek, 2. buňka 3. řádek, 3. buňka 3. řádek, 4. buňka
4. řádek, 1. buňka 4. řádek, 2. buňka 4. řádek, 3. buňka 4. řádek, 4. buňka
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
1
2
3
4
5
6
 
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
21 22 23 24
25 26 27 28
29 30 31 32
33 34 35 36
37 38 39 40
41 42 43 44
45 46 47 48
 
text text text
text text text
text text text
text text text
 
1.buňka 2.buňka
1.buňka 2. řádku 2.buňka 2. řádku
 
text 1 text 2
text 3 text 4
 
Text
 
a,1 a,2
a,3
a.a a.b
b.a b.b
 
ARCHIV 1 ARCHIV 3
ARCHIV 2 ARCHIV 4
 
H
T
M
L
WWW.ARCHIV.7X.CZ
K
O
D
Y
 
 
1.řádek, 1.buňka 1.řádek, 2.buňka
2.řádek, 1.buňka 2.řádek, 2.buňka
 
1.řádek, 1.buňka 1.řádek, 2.buňka
2.řádek, 1.buňka 2.řádek, 2.buňka
 
Buňka přes 3 sloupce
    2.řádek, 3.buňka
3.řádek, 1.buňka Buňka přes 2 řádky 3.řádek, 3.buňka
4.řádek, 1.buňka 4.řádek, 3.buňka
TOPlist

Archiv.7x.cz©

Můj BANNER

Min: : Sec

 


 




Name
Email
Comment
Or visit this link or this one