Lekcia na HTML. zlúčenie buniek

Tabuľky v HTML - veľmi šikovný položku. S nimi môžete robiť čokoľvek. Samozrejme, že hlavným účelom - umiestnenie informácie v tabuľke. Ale vývojári stránok ísť ďalej. Zrazu to bolo veľmi populárne používať tabuľku vytvoriť rámec webu. Teraz odborníci sa snažia, aby tak urobili.

Tabuľky našli široké uplatnenie vzhľadom k veľkému počtu atribútov. Napríklad veľmi užitočná vlastnosť otočil kombinovanie riadkov a stĺpcov.

Úvod do teórie

V HTML, odbor buniek dochádza pomocou dvoch atribútov: colspan a rowspan. Sú určené pre td tagu.

Poďme najprv analyzovať štruktúru každého stola, ako sa ponoriť do témy. V každej tabuľke je riadok, a v ňom - bunka. Uvedomte si, že spočiatku, všetky tabuľky musí obsahovať rovnaký počet buniek.

Na obrázku vyššie uvedených dvoch radoch a v každej z troch buniek. To je obyčajný stôl. Ak ste v každom zadajte menší počet buniek sa tabuľka "vysťahovať", to všetko nebudú zobrazovať správne.

HTML Tabuľka: zlúčenie buniek vertikálne a horizontálne

Ak chcete zadať menší počet buniek alebo reťazca môžu byť použité iba v prípade, že máte niečo zlúčiť. Ale namiesto toho, odstránené položky v najbližšieho suseda na vrchol je potrebné určiť ďalší atribút. Spojíme Ak stĺpce, potom colspan, ak strunami, potom rowspan. Hodnota atribútu udáva počet položiek, ktoré chcete zlúčiť.

Upozorňujeme, že je potrebné ho uviesť v najbližšej prvok na vrchol. Napríklad na obrázku vyššie, ak ste chceli spojiť bunky 1 a 2, je potrebné zadať v colspan atribútu bunka 1 s hodnotou dvoch. A odstrániť pozíciu číslo 2 alebo 3, na tom nezáleží.

Pointa je, že poviete bunky, koľko miesta to bude trvať. Predvolená hodnota je 1.

Zlúčiť bunky vertikálne HTML-tabuľky sa koná na rovnakom princípe. Jednoducho obsadený priestor, budú považované za vertikálne. Pozri nižšie uvedený obrázok.

Tu je bunka s číslom 43 má dva reťazce. Ak to chcete urobiť, zadať atribút rowspan. Len si spomenul:

• Riadok - riadok.
• Col - stĺpec / stĺpec.
• Span - Association.

Tvorcovia sa snažili priviesť jazyk ako je to možné pre človeka, takže dokonca bez toho by to vedeli, mohlo nejako pochopiť.

V HTML, odbor buniek môže byť vykonané v dvoch smeroch: vertikálne aj horizontálne. K tomu, aby sme špecifikovať oba atribút.

Na obrázku vyššie je práve to, a uviedol, že združenie môže robiť: riadky, stĺpce, alebo oba riadky a stĺpce.

HTML: zlúčenie buniek. príklady

Zvážme zložitejšie príklady míľnik na rozsiahlych tabuliek. Dole na ľavej strane sa nachádza pôvodnej verzii pravidelné tabuľky. Právo - variant s kombináciou dvoch buniek v druhom rade. Tak prehľadnejšie a ľahšie porovnať HTML kód.

Môžete tiež kombinovať všetky tri v centre bunky. V prvom prípade colspan atribút určuje bunku №1. Tu sa prvýkrát bude bez zmeny, a druhá pridal k colspan, ktorá sa rovná trom.

Ak chcete zlúčiť všetky bunky v rade na jednu, potom vyberte štyri TD v prvom ukazujú colspan =, 5 '.

Ako môžete vidieť, v skutočnosti je všetko jednoduché. Nič zložité. A čo je najdôležitejšie, opatrne, od prvého okamihu porozumieť všetkým nástrahám tabuliek, a potom by nemal nastať žiadny problém.

Tabuľka ako rámec webe

V HTML, odbor buniek nie je vždy používa pre pravidelné tabuľky s informáciami (v programe Word alebo Excel). Webové stránky návrhári často, ale pred tým, než prieskumy používali je pre rozvrhnutie stránok.

Zvážte napríklad rozvrhnutie webu. Tento dizajn - veľmi jednoduché a primitívne. Ale môžete zobraziť využitie asociácie explicitne.

Pôvodne tu bola tabuľka z troch radov dvoma bunkami každý. Potom, umiestniť logo miesta, dve bunky v prvom rade sa zlúčili. Pointa je, aby urobili to isté, aby sa prispôsobila "suterénu".

Vzhľadom k jej mieste je možné umiestniť prvky dizajnu, a nič nenechá svoje medze. Jedná sa o veľmi pohodlné a jednoduché. Preto to bolo tak populárne. Teraz sa odporúča vytvoriť tag div blokov.

záver

A pamätajte si, že HTML tabuľky bunka zlúčenie, môžete si robiť, čo sa vám páči. To všetko záleží na tom, čo chcete a ako chcete, aby to zariadiť. Dôležité je, nenechajte sa zmiasť. Ak chcete vytvoriť veľké tabuľky s veľkým počtom asociáciou, odporúča sa kresliť to všetko na kus papiera alebo v programe Skicár. Imposer začiatočníci to bude jednoduchšie.

Keď získajú skúsenosti, tieto operácie možno vykonávať vo vašej hlave ľahko.