Wat u moet weten over geneste tabellen

click fraud protection

Webpagina's moeten snel worden gedownload, maar geneste tabellen kunnen het proces vertragen. Laat niemand u vertellen dat meer mensen breedband of snel internet gebruiken, zodat u zich geen zorgen hoeft te maken over hoe snel uw pagina's worden geladen. Met de hoeveelheid inhoud op internet zal een pagina of site die langzaam laadt minder bezoekers hebben dan een die snel laadt. Snelheid is belangrijk, vooral bij mobiele verbindingen die mogelijk beperkt zijn tot 2G- of 3G-gegevenssnelheden.

Wat is een geneste tabel?

Een geneste tabel is een HTML-tabel met een andere tabel erin. Bijvoorbeeld:

Browser met de voorbeeldcode in het voorgaande voorbeeld van een geneste tabel.

Geneste tabellen zorgen ervoor dat pagina's langzamer worden gedownload

Een enkele tabel op een webpagina zorgt er niet voor dat de pagina langzamer wordt gedownload. Maar wanneer u een tabel in een andere tabel plaatst, wordt het voor de browser ingewikkelder om te renderen, dus de pagina laadt langzamer. En hoe meer tabellen u nest, hoe langzamer de pagina wordt geladen.

Normaal gesproken, wanneer een pagina wordt geladen, begint de browser bovenaan de HTML en laadt deze achtereenvolgens op de pagina. Bij geneste tabellen moet het echter het einde van de tabel vinden voordat het het hele ding kan weergeven. De reden dat de weergave vertraagt, is dat de browser het HTML-document meerdere keren moet herhalen.

instagram viewer

Tabellen voor lay-out

Wanneer u geldige XHTML schrijft, mogen tabellen niet worden gebruikt voor lay-out. Tabellen zijn voor tabelgegevens zoals rekenbladen, niet voor pagina-ontwerp. In plaats daarvan moet u CSS gebruiken voor lay-out:CSS-ontwerpen sneller renderen en u helpen geldige XHTML te behouden.

Sneller ladende tabellen ontwerpen

Als u een tabel met meerdere rijen ontwerpt, kan deze vaak sneller laden als u elke rij als een afzonderlijke tabel schrijft.

Maar als u dezelfde tabel als twee tabellen schrijft, lijkt het alsof deze sneller wordt geladen, omdat de browser zou de eerste renderen en vervolgens de tweede renderen, in plaats van de hele tabel allemaal weer te geven onmiddelijk. De truc is om ervoor te zorgen dat elke tabel identieke breedtes en andere stijlen heeft (zoals opvulling, marges en randen).

Geneste tabellen omzetten in één tabel

Converteer geneste tabellen naar iets complexere enkele tabellen door slim om te gaan met attributen zoals colspan, die, indien zorgvuldig geïmplementeerd, het uiterlijk van een geneste tabel simuleert zonder daadwerkelijk als een tabel te presteren.

instagram story viewer