Chcete -li spojit dvě nebo více buněk do jedné, použijte atributy colspan a rowspan značky
Příklad 12.3. Neplatné zřetězení buněk
| Buňka 1 | Buňka 2 | |
| Buňka 3 | Buňka 4 | |
Výsledek tohoto příkladu je znázorněn na obr. 12.5.
Rýže. 12.5. Vzhled další buňky v tabulce
První řádek příkladu má tři buňky, dvě z nich jsou zřetězeny pomocí atributu colspan a druhý řádek přidá pouze dvě buňky. Tím se vytvoří další buňka, která se zobrazí v prohlížeči. Je to dobře vidět na obr. 12.5.
Příklad 12-4 ukazuje správné použití atributů colspan a rowspan.
Příklad 12.4. Sloučit buňky 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 se slovy „Internet Explorer“, „Opera“ a „Firefox“ jsou sloučeny, kde jsou dvě a kde tři buňky. Svislé sloučení bylo použito v buňce označené „Prohlížeč“.
Podrobně a podrobně vám řeknu, jak v tabulkách kombinovat buňky svisle a vodorovně.
V tomto článku nebudeme vysvětlovat principy vytváření html tabulek; pro získání těchto znalostí absolvujte náš kurz HTML.
Chcete -li kombinovat buňky v tabulce, jsou tagu přiřazeny dva atributy
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 berou jako parametry celočíselné hodnoty od 0 do 1000. Zde je malý příklad toho, jak můžete kombinovat buňky v tabulce.
Na první pohled je implementována nepříliš složitá struktura, ale při pohledu na hojnost
Nabízíme vám univerzální a velmi pohodlný způsob kombinování buněk.
Nejprve si připravte prázdnou tabulku budoucí tabulky a předložte ji se všemi buňkami oddělenými. Může to být stůl 3x3, 6x10 atd. Každé buňce dáme vlastní číslo, počínaje počítáním zleva doprava a shora dolů.
Pojďme analyzovat vytvoření výše uvedené tabulky pomocí této metody.
Takto bude vypadat kód naší šablony a samotné šablony:
| 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 |
Buňky s čísly 1,2,3 musíte sloučit vodorovně. Chcete -li to provést, přidejte do kódu, buňka číslo 1, atribut colspan s hodnotou 3. A odstranit
| 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í musíme buňky 9 a 13 sloučit svisle. Provádíme podobný postup - atribut rowspan s hodnotou 2 nastavíme na buňku číslo 9, buňku odstraníme z čísla 13, napíšeme čísla buněk, z nichž se skládá ze sloučené buňky.
Tím 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 č. 11 atributy colspan = "2" rowspan = "2". Z kódu odstraníme buňky 12,15,16. Do kombinovaných čísel buněk zapíšeme 11,12,13,14.
Tím 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, dostali jsme původní tabulku, nyní mohou být buňky vyplněny informacemi, které jsou pro vás výhodné.
Doufáme, že rozumíte principu vytváření komplexních tabulek se zřetězenými buňkami.
Tabulky HTML mají dvě funkce. První jsou samotné tabulky, tedy výstup informací ve formě tabulky. A druhým je rozložení stránky. Oddělené části obsahu jsou umístěny v různých buňkách tabulky a zobrazují se tak na správném místě na stránce.
Vytvoření tabulky
Pojďme se podívat na to, jak vytvořit tabulku v HTML. To se provádí pomocí značky
| přidá buňku do řádku. Nezapomeňte zavřít značky. Vytvořme například tabulku takto:
Aby byly rámečky tabulky viditelné, tag
|
