Les over HTML. cellen samenvoegen

De tafels in de HTML - een zeer handig product. Met hen kun je niets doen. Natuurlijk, het belangrijkste doel - het plaatsen van informatie in een tabel. Maar de ontwikkelaars van de sites zijn verder gegaan. Op een gegeven moment was het erg populair om een tabel te gebruiken om een site kader te scheppen. Nu professionals proberen niet te doen.

Tafels hebben hun brede toepassing gevonden als gevolg van het grote aantal attributen. Bijvoorbeeld, een zeer nuttige eigenschap bleek een combinatie van rijen of kolommen.

Inleiding tot de Theory

In HTML, de vereniging van cellen vindt plaats door middel van twee kenmerken: colspan en rowspan. Ze zijn opgegeven voor de td tag.

Laten we eerst een analyse van de structuur van elke tafel, voordat we ingaan op het onderwerp. In elke tafel is er een lijn, en in het - cel. Vergeet niet dat in eerste instantie, alle tabellen moet hetzelfde aantal cellen bevatten.

De figuur bovengenoemde twee rijen en elk van de drie cellen. Het is een gemeenschappelijke tafel. Als u in elk vak, typ een kleiner aantal cellen, wordt de tabel "move out", alles zal niet correct worden weergegeven.

HTML-Table: Cellen samenvoegen verticaal en horizontaal

Om aan te geven een kleiner aantal cellen of strings kan alleen worden gebruikt als je iets samen te voegen hebben. Maar in plaats van de verwijderde items in de dichtste buur naar de top moet u een extra attribuut te specificeren. Als u de kolommen, dan is de colspan, indien de snaren, dan rowspan te combineren. De waarde van een eigenschap geeft het aantal items die u wilt samenvoegen.

Houd er rekening mee dat je nodig hebt om het te specificeren in de dichtste element naar de top. Bijvoorbeeld, in de figuur hierboven, als je wilde de cel 1 en 2 te combineren, moet u opgeven in de cel 1 colspan attribuut met een waarde van twee. En verwijder de positie nummer 2 of 3, het maakt niet uit.

De bottom line is dat je de cel hoeveel ruimte het zal duren vertellen. De standaardwaarde is 1.

Cellen samenvoegen verticaal HTML-tabel vindt plaats op hetzelfde principe. Gewoon bezette ruimte als verticaal worden beschouwd. Zie onderstaande figuur.

Hier, de cel met de nummer 43 neemt twee snaren. Om dit te doen, moet je het attribuut rowspan specificeren. Herinner me net:

• Row - rij.
• Col - kolom / kolom.
• Span - Association.

De makers hebben geprobeerd om de taal mogelijk bij de mens te brengen, zodat zelfs zonder het te weten, kan een of andere manier begrijpen.

In HTML, kan de vereniging van cellen worden gedaan in twee richtingen: verticaal en horizontaal. Om dit te doen, specificeren we allebei attribuut.

De bovenstaande figuur is alleen dat en verklaarde dat de vereniging kan doen: rijen, kolommen of zowel rijen en kolommen.

HTML: cellen samenvoegen. voorbeelden

Laten we eens meer complexe voorbeelden mijlpaal op grote tafels. Linksonder Stel de originele versie van een vaste tafel. Een recht - een variant met een combinatie van twee cellen in de tweede rij. Dus duidelijker en makkelijker om de HTML-code te vergelijken.

U kunt ook combineren de drie in het centrum van de cel. In het eerste geval geeft colspan kenmerk №1 de cel. Hier vindt de eerste onveranderd, en de tweede toegevoegd aan de colspan gelijk aan drie.

Als u alle cellen samen te voegen in een rij om een enkele, verwijder de vier td in de eerste colspan = geven '5'.

Zoals u kunt zien, in feite, alles is eenvoudig. Niets ingewikkeld. Belangrijker nog, zorgvuldig, vanaf de eerste tijd om alle valkuilen van de tabellen te begrijpen, en dan is er geen problemen moeten niet aan de orde.

Tabel als een site kader

In HTML, is de vereniging van cellen die niet altijd gebruikt voor gewone tafels met de informatie (in Word of Excel). Website ontwerpers vaak, maar voordat de peilingen hebben gebruikt voor de inrichting van sites.

Denk bijvoorbeeld aan de lay-out van de site. Dit ontwerp - zeer eenvoudig en primitief. Maar je kunt het gebruik van vereniging expliciet uit.

Er was oorspronkelijk een tabel met drie rijen van elk twee cellen. Vervolgens, te plaatsen het logo van de site, hebben beide cellen in de eerste rij samengevoegd. De bottom line is om hetzelfde te doen aan de "kelder" tegemoet te komen.

Door zijn plaats is het mogelijk om elementen van het ontwerp te plaatsen, en niets zal niet zijn grenzen vertrekken. Dit is een zeer handig en eenvoudig. Daarom was het zo populair is. Nu, is het raadzaam om een afd.markering blokken te creëren.

conclusie

En vergeet niet dat de HTML-tabel cel samenvoegen, kun je doen wat je wilt. Het hangt allemaal af van wat je wilt en hoe je wilt om het te regelen. Belangrijk is, niet in de war raken. Wilt u een grote tafel te maken met een groot aantal verenigingen, is het raadzaam om het allemaal op een stuk papier of in de verf. Imposer beginners zal het makkelijker zijn.

Wanneer ervaring opdoen, deze bewerkingen die u kunt uitvoeren in je hoofd gemakkelijk.