HTML návod. Zlúčenie buniek

Na kombináciu dvoch alebo viacerých buniek do jednej sa použijú atribúty colspan a rowspan značky. ... Atribút colspan nastavuje počet buniek, ktoré sa majú horizontálne zlúčiť. Atribút rowspan funguje podobne, iba s tým rozdielom, že pokrýva bunky vertikálne. Pred pridaním atribútov skontrolujte počet buniek v každom riadku, aby ste sa uistili, že sa nevyhadzujú žiadne chyby. Takže, nahrádza tri bunky, takže v nasledujúcom riadku by mali byť tri značky alebo podobná konštrukcia ...... ... Ak sa počet buniek v každom riadku nezhoduje, zobrazia sa prázdne fantómové bunky. Príklad 12.3 ukazuje, aj keď platný, ale nesprávny kód, v ktorom sa podobná chyba vyskytuje.

Príklad 12.3. Neplatné zreťazenie buniek

Nesprávne použitie colspanu

Bunka 1		Bunka 2
Bunka 3	Bunka 4

Výsledok tohto príkladu je znázornený na obr. 12.5.

Ryža. 12.5. Vzhľad ďalšej bunky v tabuľke

Prvý riadok príkladu má tri bunky, dve z nich sú zreťazené pomocou atribútu colspan a druhý riadok pridáva iba dve bunky. Vytvorí sa tak ďalšia bunka, ktorá sa zobrazí v prehliadači. Je to jasne vidieť na obr. 12.5.

Príklad 12-4 ukazuje správne použitie atribútov colspan a rowspan.

Príklad 12.4. Zlúčte bunky vertikálne a horizontálne

Zlúčenie buniek

Prehliadač	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Prehliadač	internet Explorer		Opera			Firefox
Podporované	Nie	Áno	Nie	Áno	Áno	Áno	Áno

Výsledok tohto príkladu je znázornený na obr. 12.6.

Ryža. 12.6. Tabuľka so zlúčenými bunkami

Táto tabuľka má osem stĺpcov a tri riadky. Niektoré bunky s nápisom „Internet Explorer“, „Opera“ a „Firefox“ sú kombinované tam, kde sú dve a kde tri bunky. Zvislé zlúčenie bolo použité v bunke označenej ako „Prehliadač“.

Podrobne a podrobne vám poviem, ako kombinovať bunky vertikálne a horizontálne v tabuľkách.

V tomto článku nebudeme vysvetľovať princípy vytvárania html tabuliek, aby ste získali tieto znalosti, urobte si náš kurz HTML.

Na kombinovanie buniek v tabuľke sú značke priradené dva atribúty sú to colspan (horizontálne spojenie) a rowspan (vertikálne spojenie).

Niektorí ľudia majú problémy s používaním týchto atribútov, problémy so spájaním buniek.

Atribúty colspan a rowspan berú ako parametre celočíselné hodnoty od 0 do 1 000. Tu je malý príklad toho, ako môžete kombinovať bunky v tabuľke.

Na prvý pohľad je implementovaná nie príliš zložitá štruktúra, ale pri pohľade na množstvo a Prvky v kóde sú ťažko pochopiteľné na základe akého princípu môžete skombinovať niekoľko ďalších buniek.

Ponúkame vám všestranný a veľmi pohodlný spôsob kombinovania buniek.

Na začiatok si pripravte prázdny stôl budúcej tabuľky a predstavte ho so všetkými bunkami oddelenými. Mohol by to byť stôl 3x3, 6x10 atď. Každej bunke priradíme vlastné číslo, pričom začne počítať zľava doprava a zhora nadol.

Analyzujme vytvorenie vyššie uvedenej tabuľky pomocou tejto metódy.

Takto bude vyzerať kód našej šablóny a samotnej šablóny:

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

Bunky s číslami 1,2,3 musíte zlúčiť vodorovne. Za týmto účelom v kóde, bunka číslo 1, pridajte atribút colspan s hodnotou 3. A odstrániť prvky s číslami 2 a 3. Do výslednej bunky zapíšeme čísla zlúčených buniek.

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

Teraz musíme bunky 9 a 13 zlúčiť zvisle. Vykonáme podobný postup - atribút rowspan nastavíme na bunku číslo 9 s hodnotou 2, odstránime bunku z čísla 13, napíšeme čísla buniek, z ktorých pozostáva zo zlúčenej bunky.

Tým sa zmení náš kód a vzhľad tabuľky:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

Zostáva skombinovať 11,12,15,16 buniek do jednej. Za týmto účelom napíšte do bunky č. 11 atribúty colspan = "2" rowspan = "2". Z kódu odstránime bunky 12,15,16. Do kombinovanej bunky napíšeme čísla 11,12,13,14.

Tým sa zmení náš kód a vzhľad tabuľky:

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šetko, dostali sme pôvodnú tabuľku, teraz môžu byť bunky naplnené informáciami, ktoré sú pre vás vhodné.

Dúfame, že porozumiete princípu vytvárania komplexných tabuliek so zreťazenými bunkami.

Tabuľky HTML majú dve funkcie. Prvým sú samotné tabuľky, to znamená výstup informácií vo forme tabuľky. A druhým je rozloženie stránky. Oddelené časti obsahu sú umiestnené v rôznych bunkách tabuľky, a preto sa zobrazujú na správnom mieste na stránke.

Vytvorenie tabuľky

Pozrime sa, ako vytvoriť tabuľku v HTML. To sa vykonáva pomocou značky

... Tabuľky sú zostavené z riadkov, v ktorých sú bunky. Tieto bunky obsahujú obsah tabuľky. Označiť pridá do tabuľky riadok a značku

pridá bunku do riadka. Nezabudnite zavrieť značky. Vytvorme napríklad tabuľku takto:

Aby boli rámy tabuľky viditeľné, značka

atribút border bol nastavený, ale HTML5 tento atribút zastaráva a zastaráva. Okrem toho existujú ďalšie atribúty na prácu s rámcami a zmenu pozadia a bunky majú aj atribúty na zarovnanie obsahu. Všetky tieto atribúty sú tiež zastarané. Namiesto toho by ste mali používať štýly.

Spojte bunky tabuľky

Bunky tabuľky je možné kombinovať do jednej. Ak to chcete urobiť, značka

existuje atribút colspan, ktorý spája bunky v rovnakom riadku, a atribút rowspan, ktorý spája bunky z rôznych riadkov. Hodnota týchto atribútov je počet buniek, ktoré sa majú zlúčiť.

Vytvorme tabuľku takto:

Upozorňujeme, že v druhom riadku tabuľky jedna bunka nahradí dve bunky, takže celkový počet buniek v tomto riadku bude menší ako v ostatných, v tomto prípade jednej.

Teraz vytvoríme tabuľku takto:

Ďalšie štítky tabuľky

Okrem značiek, ktoré sme použili, existujú aj značky, ktoré sa používajú aj pri vytváraní tabuľky.

- hlavičková bunka. Obvykle sa nachádza v prvom riadku tabuľky. Používa sa na vytvorenie názvu stĺpca tabuľky. Zo značky

sa líši iba tučným a zarovnaním na stred.

- je vo vnútri značky , pridá do tabuľky názov.

- obsahuje prvých pár riadkov tabuľky na označenie konkrétneho štýlu. V tabuľke môže byť iba jedna taká značka. Riadky, ktoré obsahuje, musia začínať od prvého riadka.

- obsahuje niekoľko riadkov tabuľky na označenie konkrétneho štýlu. V tabuľke môže byť niekoľko takýchto značiek.

- obsahuje riadky tabuľky, ktoré sa zobrazia v spodnej časti tabuľky.

- definuje štýl pre jeden stĺpec tabuľky, začínajúc od prvého. To znamená, že prvá taká značka bude určovať štýl pre prvý stĺpec, druhú značku pre druhý stĺpec atď. V rôznych prehliadačoch funguje odlišne.