Chcete-li spojit dvě nebo více buněk do jedné, použijte atributy colspan a rowspan značky
Příklad 12.3. Nesprávné sloučení buněk
| Buňka 1 | Buňka 2 | |
| Buňka 3 | Buňka 4 | |
Výsledek tento příklad znázorněno na Obr. 12.5.
Rýže. 12.5. Vzhled další buňky v tabulce
První řádek příkladu určuje tři buňky, dvě z nich jsou spojeny pomocí atributu colspan, ale druhý řádek přidává pouze dvě buňky. Z tohoto důvodu se zobrazí další buňka, která se zobrazí v prohlížeči. Je to dobře vidět na Obr. 12.5.
Správné použití atributů colspan a rowspan je demonstrováno v příkladu 12.4.
Příklad 12.4. Sloučení buněk svisle a vodorovně
| Prohlížeč | internet Explorer | Opera | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| Podporováno | Ne | Ano | Ne | Ano | Ano | Ano | Ano |
Výsledek tohoto příkladu je znázorněn na Obr. 12.6.
Rýže. 12.6. Tabulka se sloučenými buňkami
Tato tabulka má osm sloupců a tři řádky. Některé buňky s nápisy „Internet Explorer“, „Opera“ a „Firefox“ jsou na některých místech kombinovány se dvěma a jinde se třemi. V buňce označené "Prohlížeč" bylo použito vertikální sloučení.
tabulky Nejlepší způsob, jak se na to podívat, je jednoduchá tabulka, jejíž HTML kód je uveden ve výpisu 5.10.
Jedná se o běžnou tabulku, jejíž buňky jsou očíslovány – to nám v budoucnu usnadní. Na Obr. Obrázek 5.2 ukazuje jeho vzhled v okně webového prohlížeče.
Nyní se podívejme na tabulku na obr. 5.3.
Zde jsme sloučili některé buňky. Je vidět, že se spojené buňky jakoby spojily v jednu. Jak to udělat?
Speciálně pro tento účel značky a
Chcete-li sloučit více buněk vodorovně do jedné, musíte postupovat podle těchto kroků.
1. Najděte v kódu HTML tag (
2. Zadejte do něj atribut COLSPAN a přiřaďte mu počet buněk, které mají být sloučeny, počítáme tu úplně první.
3. Odstraňte značky (
Sloučíme buňky 2 a 3 tabulky (viz Výpis 5.10). Opravený fragment kódu, který vytváří první řádek této tabulky, je uveden ve výpisu 5.11.
Stejným způsobem vytvoříme spojené buňky 4 + 5 a 12 + 13 + 14 + 15.
Vertikální sloučení buněk je trochu obtížnější. Zde jsou kroky, které k tomu musíte dodržet.
1. Najděte v kódu HTML řetězec(značka), která obsahuje první buňku ke sloučení (pokud počítáte řádky shora dolů).
2. Najděte značku (
3. Zadejte do něj atribut ROWSPAN a přiřaďte mu množství sloučené buňky, včetně úplně prvního z nich.
4. Zobrazte následující řádky a odstraňte z nich značky (
Odešli jsme spojit buňky 1 a 6 naší tabulky. Výpis 5.12 obsahuje opravený fragment svého HTML kódu (opravy ovlivňují první a druhý řádek).
Všimněte si, že jsme odstranili značku, která vytvořila šestou buňku z druhého řádku, protože se sloučila s první buňkou.
V dnešní době se příliš často nepoužívá. Avšak dříve, v době rozkvětu tabulkového webdesignu, bylo obtížné najít stůl bez sloučené buňky. Tak či onak, není na škodu o tom vědět.
Řeknu vám podrobně o tom, jak sloučit buňky svisle a vodorovně v tabulkách.
V tomto článku nebudeme vysvětlovat principy vytváření html tabulky, k získání těchto znalostí absolvujte náš kurz HTML.
Chcete-li kombinovat buňky v tabulce, existují dva atributy, které jsou nastaveny na značku
Někteří lidé mají potíže s používáním těchto atributů, problémy se slučováním buněk.
Atributy colspan a rowspan přijímají jako parametry celočíselné hodnoty od 0 do 1000. Zde je malý příklad toho, jak můžete sloučit buňky v tabulce.
Na první pohled není implementovaná struktura příliš složitá, ale při pohledu na hojnost
Nabízíme vám univerzální a velmi pohodlný způsob, jak buňky kombinovat.
Nejprve si připravte šablonu pro budoucí tabulku a předložte ji se všemi buňkami oddělenými. Může to být stůl 3x3, 6x10 a tak dále. Každé buňce přidělíme vlastní číslo, počínaje zleva doprava a shora dolů.
Podívejme se na vytvoření výše uvedené tabulky pomocí této metody.
Takto bude vypadat kód naší šablony a šablona samotná:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Je nutné sloučit buňky s čísly 1,2,3 vodorovně. Chcete-li to provést, v kódu v buňce č. 1 přidejte atribut colspan s hodnotou 3. A smazat
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Nyní potřebujeme vertikálně sloučit buňky 9 a 13. Provedeme obdobný postup - do buňky č. 9 nastavíme atribut rowspan s hodnotou 2, vymažeme buňku č. 13, do sloučené buňky zapíšeme čísla buněk, ze kterých se skládá.
Takto se změní náš kód a vzhled tabulky:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
Zbývá spojit 11,12,15,16 buněk do jedné. Chcete-li to provést, napište do buňky číslo 11 atributy colspan ="2" rowspan ="2". Buňky 12,15,16 jsou z kódu odstraněny. Do spojené buňky zapíšeme čísla 11,12,13,14.
Takto se změní náš kód a vzhled tabulky:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
To je vše, obdrželi jsme původní tabulku, nyní lze buňky vyplnit informacemi, které jsou pro vás vhodné.
Doufáme, že pochopíte princip vytváření složitých tabulek se slučováním buněk.
Zbývá mluvit o jedné zajímavé funkci jazyk HTML. Toto je tzv slučování buněk tabulky. Nejlepší příklad ke zvážení je jednoduchá tabulka, jejíž HTML kód je uveden ve výpisu 5.10.
Výpis 5.10
Jedná se o běžnou tabulku, jejíž buňky jsou očíslovány – to nám v budoucnu usnadní. Na Obr. Obrázek 5.2 ukazuje jeho vzhled v okně webového prohlížeče.
Nyní se podívejme na tabulku na obr. 5.3.
Zde jsme sloučili některé buňky. Je vidět, že se spojené buňky jakoby spojily v jednu. Jak to udělat?
Speciálně pro tento účel značky a
Rýže. 5.2. Původní tabulka, jejíž buňky budou sloučeny
Rýže. 5.3. Tabulka zobrazená na Obr. 5.2, po sloučení některých buněk (sloučené buňky jsou označeny přidáním jejich čísel)
Chcete-li sloučit více buněk vodorovně do jedné, musíte postupovat podle těchto kroků.
1. Najděte značku v kódu HTML
Stejným způsobem vytvoříme spojené buňky 4 + 5 a 12 + 13 + 14 + 15.
Vertikální sloučení buněk je trochu obtížnější. Zde jsou kroky, které k tomu musíte dodržet.
1. Najděte řádek (značku) v kódu HTML, který obsahuje první z buněk, které mají být sloučeny (pokud počítáte řádky shora dolů).
2. Najděte značku v kódu tohoto řádku
Všimněte si, že jsme odstranili značku, která vytvořila šestou buňku z druhého řádku, protože se sloučila s první buňkou.
Slučování buněk se v dnešní době příliš často nepoužívá. Nicméně dříve, během rozkvětu tabulkového webdesignu (pro tabulkový web design viz Kapitola 10), bylo obtížné najít tabulku bez sloučených buněk. Tak či onak, není na škodu o tom vědět.
Velmi výhodná položka. Můžete s nimi dělat cokoliv. Hlavním účelem je samozřejmě umístění informací ve formě tabulky. Ale vývojáři webových stránek šli ještě dále. Svého času bylo velmi populární používat tabulky k vytvoření rámce webových stránek. Nyní se to profesionálové snaží nedělat.
Tabulky jsou široce používány kvůli velkému množství atributů. Jako velmi užitečná se ukázala například vlastnost spojování řádků nebo sloupců.
Úvod do teorie
V HTML dochází ke slučování buněk pomocí dvou atributů: colspan a rowspan. Jsou určeny pro značku td.
Nejprve se podívejme na strukturu libovolné tabulky, než se pustíme do tématu. Každá tabulka má řádek a v něm jsou buňky. Pamatujte, že zpočátku musí všechny tabulky obsahovat stejný počet buněk.
Obrázek výše ukazuje dva řádky, každý se třemi buňkami. Toto je běžná tabulka. Pokud v libovolném řádku zadáte menší počet buněk, tabulka se „prohne“ a vše se zobrazí nesprávně.
HTML tabulka: sloučení buněk svisle a vodorovně
Pokud něco slučujete, můžete zadat méně buněk nebo řádků. Ale místo odstraněného prvku musí být v nejbližším sousedovi k začátku uveden další atribut. Pokud kombinujete sloupce, pak colspan, pokud kombinujete řádky, pak rowspan. Hodnota atributu určuje počet prvků, které mají být kombinovány.
Upozorňujeme, že jej musíte zadat v prvku nejblíže začátku. Pokud byste například na obrázku výše chtěli sloučit buňku 1 a 2, zadali byste atribut colspan v buňce 1 s hodnotou dvě. A na smazání buňky číslo 2 nebo 3 už nezáleží.
Myšlenka je taková, že buňce řeknete, kolik místa zabere. Výchozí hodnota je 1.
Vertikální sloučení buněk v tabulce HTML se řídí stejným principem. Jednoduše obsazený prostor se bude počítat svisle. Viz obrázek níže.
Zde buňka s číslem 43 zabírá dva řádky. Chcete-li to provést, zadejte atribut rowspan. Snadno zapamatovatelné:
- Řádek - řetězec.
- Col - sloupec/sloupec.
- Span - asociace.
Tvůrci jazyka se jej snažili co nejvíce přiblížit lidské řeči, aby jí člověk i bez její znalosti mohl alespoň nějak rozumět.
V HTML lze sloučení buněk provést ve dvou směrech najednou: vertikálně a horizontálně. Za tímto účelem specifikujeme oba atributy současně.
Na obrázku výše je přesně to, co je naznačeno, že můžete sjednotit: řádky, sloupce a současně sloupce a řádky.
HTML: Sloučení buněk. Příklady
Podívejme se na složitější příklady krok za krokem ve velkých tabulkách. Obrázek níže vlevo ukazuje původní verzi běžné tabulky. A vpravo je možnost s kombinací dvou buněk ve druhé řadě. Díky tomu je porovnávání HTML kódu přehlednější a snazší.
Můžete také spojit tři buňky uprostřed. V prvním případě byl v buňce č. 1 uveden atribut colspan. Zde bude první nezměněn a druhý bude mít přidaný sloupec tří.
Pokud chcete sloučit každou jednotlivou buňku v řadě, odstraňte čtyři tds a v první zadejte colspan="5".
Jak vidíte, ve skutečnosti je to všechno jednoduché. Není nic složitého. Hlavní věc je pečlivě pochopit všechna úskalí tabulek napoprvé a pak by neměly nastat žádné problémy.
Tabulky jako rámec webu
V HTML se slučování buněk vždy nepoužívá pro běžné tabulky informací (jako ve Wordu nebo Excelu). Vývojáři webových stránek je často a v minulosti používali pro rozvržení webových stránek.
Vezměme si například tuto maketu webu. Tento design je velmi jednoduchý a primitivní. Ale zde je možné explicitně ukázat použití sjednocení.
Původně existovala tabulka se třemi řádky, každá po dvou buňkách. Poté, aby se přizpůsobilo logu webu, byly dvě buňky v prvním řádku sloučeny. V spodní řádek udělal totéž pro umístění "suterénu".
Díky tomu můžete umístit designové prvky na jejich místo a nic nikam nepřekročí jeho hranice. Je to velmi pohodlné a jednoduché. Proto byl tak oblíbený. V dnešní době se pro vytváření bloků doporučuje značka div.
Závěr
A nezapomeňte, že v tabulce HTML můžete buňky sloučit libovolným způsobem. Vše záleží na tom, co potřebujete a jak si to chcete zařídit. Hlavní je nenechat se zmást. Pokud chcete vytvořit velký stůl s velkým počtem spojů, doporučuje se to nejprve nakreslit na papír nebo v programu Malování. Pro začínající návrháře rozvržení to bude jednodušší.
Když získáte zkušenosti, můžete takové operace snadno provádět v hlavě.