Lekce v HTML. Sloučit buňky

Tabulky v HTML - velmi pohodlný prvek. Můžete s nimi něco udělat. Samozřejmě, že hlavní cíl - umístění informací ve formě tabulky. Ale vývojáři webu šli dále. Najednou bylo velmi populární použít tabulky k vytvoření skeletu webu. Nyní se odborníci snaží nedělat tak.

Tabulky jsou široce používány kvůli velkému počtu atributů. Například bylo velmi užitečné kombinovat řádky nebo sloupce.

Úvod do teorie

V kódu HTML dochází k spojení buněk pomocí dvou atributů: colspan a rowspan. Jsou určeny pro značku td.

Začněme tím, že zkoumáme strukturu libovolného stolu předtím, než se ponoříme do tématu. V každé tabulce je čára a v ní jsou buňky. Nezapomeňte, že zpočátku všechny tabulky obsahují stejný počet buněk.

Obrázek výše ukazuje dva řádky a každý má tři buňky. To je normální tabulka. Pokud zadáte menší počet buněk v řádku, tabulka bude "jít", vše bude zobrazeno nesprávně.

Tabulka HTML: kombinuje buňky vertikálně a horizontálně

Můžete určit méně buněk nebo řádků pouze tehdy, pokud něco kombinujete. Namísto odstraněného prvku nejbližšího souseda je však třeba zadat další atribut. Pokud kombinujete sloupce, pak colspan, pokud řádky, pak rowspan. Hodnota atributu určuje počet prvků, které mají být sloučeny.

Všimněte si, že musíte přesně určit nejbližší prvek na začátku. Například na obrázku výše, pokud chcete sloučit buňky 1 a 2, musíte v buňce 1 zadat atribut colspan s hodnotou dva. A vymažte číslo 2 nebo 3, je to jedno.

Nejdůležitější je to, že buňce řeknete, kolik místa bude trvat. Výchozí hodnota je 1.

Spojení buněk ve vertikální tabulce HTML je stejné. Právě obsazený prostor bude považován za vertikální. Viz obrázek níže.

Zde obsahuje buňka s číslem 43 dvě řádky. Chcete-li to provést, jste zadali atribut rowspan. Připomíná se jednoduše:

• Řádek je řetězec.
• Col sloupec / sloupec.
• Span - asociace.

Tvůrci se snažili přivést jazyk jak je to možné pro člověka, takže dokonce aniž by to věděli, mohlo nějak pochopit.

V kódu HTML lze kombinovat buňky ve dvou směrech: vertikálně a horizontálně. Chcete-li to provést, zadejte oba atributy současně.

Na obrázku výše je právě to, a uvedl, že sdružení může dělat: řádky, sloupce, nebo oba řádky a sloupce.

HTML: Sloučit buňky. Příklady

Zvažte komplexnější příklady ve velkých tabulkách. Níže na obrázku vlevo je původní verze pravidelné tabulky. A vpravo - variant s spojením dvou buněk ve druhém řádku. Snadnější je porovnávat kód HTML.

Můžete také spojit tři buňky uprostřed. V prvním případě byl atribut colspan specifikován v buňce # 1. Tady první bude nezměněno a ve druhé přidáno colspan rovnající se třem.

Chcete-li všechny buňky řadit do jediné, odstraňte čtyři td a v první zadejte colspan = `5`.

Jak můžete vidět, ve skutečnosti je to všechno jednoduché. Není nic složitého. A co je nejdůležitější, opatrně, od prvního okamžiku porozumět všem nástrahám tabulek, a pak by neměl nastat žádný problém.

Tabulky jako kostra místa

V kódu HTML se spojení buněk vždy nepoužívá pro běžné tabulky s informacemi (jako v aplikaci Word nebo Excel). Vývojáři webových stránek často používali a používali je pro rozvržení webových stránek.

Můžete například zobrazit rozvržení stránky. Tento návrh je velmi jednoduchý a primitivní. Ale zde můžete explicitně ukázat použití sdružení.

Zde bylo zpočátku tabulka tří řádků, dvě buňky v každé. Potom pro umístění loga webu byly dvě buňky v prvním řádku sloučeny. Spodní řádek provedl totéž pro umístění "suterénu".

Díky tomu můžete na svých místech umístit designové prvky a nic z nich nebude za hranicemi. Je to velmi pohodlné a jednoduché. Proto je tak populární. Nyní se doporučuje vytvořit blok tagů div.

Závěr

A nezapomeňte, že v tabulce HTML můžete buňky kombinovat, jak chcete. Vše závisí na tom, co potřebujete, a jak chcete, aby to bylo hotovo. Hlavní věc, nezaměňujte. Chcete-li vytvořit velké tabulky s velkým počtem asociací, doporučuje se kreslit to všechno na kus papíru nebo v programu Malování. Pro začátečníky bude snazší.

Když získáte zkušenosti, můžete tyto operace snadno provádět v hlavě.