Ak chcete zlúčiť dve alebo viac buniek do jednej, použite atribúty colspan a rowspan značky
Príklad 12.3. Nesprávne zlúčenie buniek
| Bunka 1 | Bunka 2 | |
| Bunka 3 | Bunka 4 | |
Výsledok tento príklad 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ú zlúčené s atribútom colspan a druhý riadok má pridané iba dve bunky. To spôsobí, že sa v prehliadači zobrazí ďalšia bunka. Je to jasne viditeľné na obr. 12.5.
Správne použitie atribútov colspan a rowspan je uvedené v príklade 12-4.
Príklad 12.4. Zlúčenie buniek vertikálne a horizontálne
| Prehliadač | internet Explorer | Opera | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| 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. Časť buniek s nápismi "Internet Explorer", "Opera" a "Firefox" je zlúčená, kde sú dve a kde sú tri bunky. Bunka označená ako „Prehliadač“ má použité vertikálne zlúčenie.
tabuľky Najlepším príkladom je jednoduchá tabuľka zobrazená vo výpise 5-10 v HTML.
Ide o bežnú tabuľku, ktorej bunky sú očíslované - takže to bude pre nás v budúcnosti jednoduchšie. Na obr. 5.2 zobrazuje svoj vzhľad v okne webového prehliadača.
Teraz zvážte tabuľku na obr. 5.3.
Tu sú niektoré bunky zlúčené. Je vidieť, že sa zlúčené bunky akoby zlúčili do jednej. Ako to spraviť?
Najmä pre tieto značky a
Ak chcete zlúčiť viacero buniek vodorovne do jednej, postupujte podľa týchto krokov.
1. Nájdite v kóde HTML tag (
2. Zadajte doň atribút COLSPAN a priraďte mu počet buniek, ktoré sa majú spojiť, pričom počítajte aj úplne prvú.
3. Odstráňte značky (
Zlúčme bunky 2 a 3 tabuľky (pozri Výpis 5.10). Opravený útržok kódu, ktorý vytvára prvý riadok tejto tabuľky, je zobrazený vo výpise 5-11.
Rovnakým spôsobom vytvoríme spojené bunky 4 + 5 a 12 + 13 + 14 + 15.
Vertikálne zlúčenie buniek je trochu zložitejšie. Tu sú kroky, ktoré treba dodržať.
1. Nájdite v kóde HTML reťazec(tag ), ktorý obsahuje prvú zo zlúčených buniek (ak počítate riadky zhora nadol).
2. Nájdite značku (
3. Zadajte do neho atribút ROWSPAN a priraďte mu množstvo zlúčené bunky, vrátane úplne prvého z nich.
4. Zobrazte nasledujúce riadky a odstráňte z nich značky (
Odišli sme Zlúčiť bunky 1 a 6 našej tabuľky. Výpis 5-12 obsahuje opravený úryvok jej kódu HTML (opravy ovplyvňujú prvý a druhý riadok).
Všimnite si, že sme odstránili značku z druhého riadku, čím sa vytvorí šiesta bunka, pretože je zlúčená s prvou bunkou.
Teraz sa veľmi často nepoužíva. Avšak skôr, počas rozkvetu tabuľkového webového dizajnu, bolo ťažké stretnúť sa bez stola zlúčené bunky. Tak či onak, nezaškodí o tom vedieť.
Poviem vám podrobne a podrobne o tom, ako zlúčiť bunky vertikálne a horizontálne v tabuľkách.
V tomto článku nebudeme vysvetľovať princípy vytváranie html tabuľky, pre tieto znalosti absolvujte náš kurz o HTML.
Na zlúčenie buniek v tabuľke sú pre značku nastavené dva atribúty
Niektorí ľudia majú problémy s používaním týchto atribútov, spájaním buniek.
Atribúty colspan a rowspan majú ako parametre celočíselné hodnoty od 0 do 1000. Tu je malý príklad, ako môžete zlúčiť bunky v tabuľke.
Na prvý pohľad je implementovaná nie veľmi zložitá štruktúra, ale pri pohľade na hojnosť
Ponúkame vám univerzálny a veľmi pohodlný spôsob spájania buniek.
Ak chcete začať, pripravte si prázdny priestor pre budúcu tabuľku a prezentujte ho so všetkými oddelenými bunkami. Môže to byť stôl 3x3, 6x10 a tak ďalej. Každej bunke dáme jej vlastné číslo, pričom začneme počítať zľava doprava a zhora nadol.
Analyzujme vytvorenie vyššie uvedenej tabuľky pomocou tejto metódy.
Takto bude vyzerať kód nášho obrobku a samotný obrobok:
| 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 je potrebné zlúčiť horizontálne. Ak to chcete urobiť, v kóde, bunka číslo 1, pridajte atribút col span s hodnotou 3. A vymazať
| 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 zlúčiť bunky 9 a 13 vertikálne. Vykonávame podobný postup - pre bunku č. 9 nastavíme atribút rowspan na hodnotu 2 , bunku s č. 13 vymažeme, do zlúčenej bunky zapíšeme čísla buniek, z ktorých sa skladá.
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 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
Zostáva zlúčiť 11,12,15,16 buniek do jednej. Za týmto účelom do bunky s číslom 11 napíšeme atribúty colspan ="2" rowspan ="2" . Bunky 12,15,16 sú z kódu odstránené. Do spojenej bunky napíšeme čísla 11,12,13,14.
Takto 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é vám budú vyhovovať.
Dúfame, že ste pochopili princíp vytvárania zložitých tabuliek so zlučovaním buniek.
Zostáva hovoriť o jednej zaujímavej funkcii jazyk HTML. Tento tzv zlučovanie buniek tabuľky. Najlepším príkladom je jednoduchá tabuľka, ktorej HTML je zobrazené vo výpise 5-10.
Výpis 5.10
Ide o bežnú tabuľku, ktorej bunky sú očíslované - takže to bude pre nás v budúcnosti jednoduchšie. Na obr. 5.2 zobrazuje svoj vzhľad v okne webového prehliadača.
Teraz zvážte tabuľku na obr. 5.3.
Tu sú niektoré bunky zlúčené. Je vidieť, že sa zlúčené bunky akoby zlúčili do jednej. Ako to spraviť?
Najmä pre tieto značky a
Ryža. 5.2. Pôvodná tabuľka, ktorej bunky budú zlúčené
Ryža. 5.3. Tabuľka znázornená na obr. 5.2, po zlúčení niektorých buniek (zlúčené bunky sú označené pridaním ich čísel)
Ak chcete zlúčiť viacero buniek vodorovne do jednej, postupujte podľa týchto krokov.
1. Nájdite značku v kóde HTML
Rovnakým spôsobom vytvoríme spojené bunky 4 + 5 a 12 + 13 + 14 + 15.
Vertikálne zlúčenie buniek je trochu zložitejšie. Tu sú kroky, ktoré treba dodržať.
1. Nájdite v kóde HTML riadok (značku), ktorý obsahuje prvú z buniek, ktoré sa majú zlúčiť (ak počítate riadky zhora nadol).
2. Nájdite značku v kóde tohto riadku
Všimnite si, že sme odstránili značku z druhého riadku, čím sa vytvorí šiesta bunka, pretože je zlúčená s prvou bunkou.
Zlučovanie buniek sa v dnešnej dobe veľmi často nepoužíva. Avšak skôr, počas rozkvetu tabuľkového webového dizajnu (pre tabuľkový webový dizajn pozri kapitola 10), bolo ťažké nájsť tabuľku bez zlúčených buniek. Tak či onak, nezaškodí o tom vedieť.
Veľmi šikovná vec. Môžete s nimi robiť čokoľvek. Samozrejme, hlavným účelom je umiestniť informácie vo forme tabuľky. Vývojári webových stránok však zašli ešte ďalej. Kedysi bolo veľmi populárne používať tabuľky na vytvorenie rámca lokality. Teraz sa to odborníci snažia nerobiť.
Tabuľky našli svoje široké využitie vďaka veľkému množstvu atribútov. Napríklad vlastnosť spájania riadkov alebo stĺpcov sa ukázala ako veľmi užitočná.
Úvod do teórie
V HTML sú bunky zlúčené pomocou dvoch atribútov: colspan a rowspan. Sú špecifikované pre značku td.
Najprv analyzujme štruktúru ľubovoľnej tabuľky predtým, ako sa ponoríme do témy. Každá tabuľka má riadok s bunkami. Pamätajte, že na začiatku musia všetky tabuľky obsahovať rovnaký počet buniek.
Na obrázku vyššie sú dva riadky, každý s tromi bunkami. Toto je bežný stôl. Ak zadáte menší počet buniek v ľubovoľnom riadku, potom sa tabuľka „vysunie“, všetko sa zobrazí nesprávne.
Tabuľka HTML: Zlúčenie buniek vertikálne a horizontálne
Menej buniek alebo riadkov môžete zadať iba vtedy, ak niečo spájate. Ale namiesto odstráneného prvku je potrebné zadať ďalší atribút v najbližšom susede od začiatku. Ak skombinujete stĺpce, potom colspan, ak riadky, potom riadok. Hodnota atribútu určuje počet prvkov, ktoré sa majú skombinovať.
Upozorňujeme, že ho musíte zadať v najbližšom prvku k začiatku. Napríklad na obrázku vyššie, ak by ste chceli zlúčiť bunku 1 a 2, nastavili by ste bunku 1 tak, aby mala atribút colspan nastavený na dva. A vymažte bunku číslo 2 alebo 3, už na tom nezáleží.
Základom je, že bunke poviete, koľko miesta zaberie. Predvolená hodnota je 1.
Vertikálne zlúčenie buniek v tabuľke HTML sa riadi rovnakým princípom. Jednoducho obsadený priestor sa bude posudzovať vertikálne. Pozrite si obrázok nižšie.
Tu bunka s číslom 43 zaberá dva riadky. Na tento účel bol zadaný atribút rowspan. Je ľahké si to zapamätať:
- Riadok - reťazec.
- Stĺpec - stĺpec/stĺpec.
- Span - zväzok.
Tvorcovia jazyka sa ho snažili čo najviac priblížiť tomu ľudskému, aby mu človek aj bez jeho znalosti aspoň ako-tak porozumel.
V HTML môžu byť bunky zlúčené v dvoch smeroch naraz: vertikálne a horizontálne. Ak to chcete urobiť, zadajte oba atribúty súčasne.
Na obrázku vyššie je to presne to, čo naznačuje, že môžete zjednotiť: riadky, stĺpce a zároveň stĺpce a riadky.
HTML: zlučovanie buniek. Príklady
Pozrime sa na zložitejšie príklady krok za krokom vo veľkých tabuľkách. Obrázok nižšie vľavo zobrazuje pôvodnú verziu bežnej tabuľky. A vpravo - variant so spojením dvoch buniek v druhom rade. Je teda prehľadnejšie a jednoduchšie porovnávať HTML kód.
Môžete tiež zlúčiť tri bunky v strede. V prvom prípade bol atribút colspan špecifikovaný v bunke #1. Tu prvý zostane nezmenený a k druhému bol pridaný colspan rovný tri.
Ak chcete zlúčiť všetky bunky v riadku do jednej, odstráňte štyri tds a do prvej zadajte colspan="5".
Ako vidíte, je to vlastne celkom jednoduché. Nie je nič ťažké. Hlavnou vecou je starostlivo, od prvej chvíle, pochopiť všetky úskalia tabuliek a potom by nemali vzniknúť žiadne problémy.
Tabuľky ako rámec lokality
V HTML sa zlúčenie buniek nie vždy používa pre bežné tabuľky informácií (ako vo Worde alebo Exceli). Vývojári webových stránok ich často a predtým bez výnimky používali na usporiadanie webových stránok.
Zvážte napríklad toto rozloženie stránky. Tento dizajn je veľmi jednoduchý a primitívny. Ale tu je možné explicitne ukázať použitie spojenia.
Pôvodne existovala tabuľka s tromi riadkami, každá po dve bunky. Potom sa na umiestnenie loga lokality zlúčili dve bunky v prvom riadku. AT spodná čiara urobil to isté pre umiestnenie "suterénu".
Vďaka tomu môžete umiestniť dizajnové prvky na svoje miesta a nič neprekročí jeho hranice. Je to veľmi pohodlné a jednoduché. Preto bol taký populárny. Značka div sa teraz odporúča na vytváranie blokov.
Záver
A nezabudnite, že v tabuľke HTML môžete zlúčiť bunky, čo chcete. Všetko závisí od toho, čo potrebujete a ako si to chcete zariadiť. Hlavne sa nenechajte zmiasť. Ak chcete vytvoriť veľký stôl s veľkým počtom spojov, odporúča sa, aby ste si to všetko najskôr nakreslili na papier alebo v programe Maľovanie. Pre začiatočníkov to bude takto jednoduchšie.
Keď získate skúsenosti, môžete ľahko vykonávať takéto operácie v hlave.