Tabellen spelen een belangrijke rol bij het presenteren van gegevens in een georganiseerde indeling. In deze tutorial leer je hoe je basis HTML-tabellen maakt en de essentiële tags voor de lay-out en structuur kunt gebruiken.
Stapsgewijze instructie
Laten we beginnen met het maken van jouw eerste tabel! Eerst moet je weten dat de standaardtag voor een tabel is. Deze tag omhult de gehele tabel.
Nu voegen we een rij toe. Elke rij wordt gedefinieerd met de tag die staat voor "table row". In deze rij zijn er nog geen gegevens, dus deze blijft voorlopig leeg. Je kunt je voorstellen dat elke rij ruimte biedt voor meerdere kolommen.
Nu is het tijd om enkele gegevens aan de tabel toe te voegen. Hiervoor gebruiken we de -tag en voegen we de bijbehorende waarden toe. Laten we aannemen dat de eerste naam "Jan" is, de e-mail "support@programmierenlern.info" en de geboortedatum 23-06-1982 is. Jouw rij zou er dan als volgt uit moeten zien:
Zorg ervoor dat de tabel er nu beter uitziet. Je kunt zoveel rijen toevoegen als je wilt, door simpelweg meer - en -tags te gebruiken. Laten we nog een werknemer toevoegen. Laten we hem "Joe Average" noemen en zijn e-mail kan "joe@average.com" zijn.
Als we nu de tabel opnieuw laden, merken we dat deze groeit en alle ingevoerde gegevens zichtbaar zijn. De structuur is hierbij belangrijk, omdat deze je een duidelijk overzicht van de informatie biedt.
Wat als je aan het einde van de tabel een voettekst wilt toevoegen, bijvoorbeeld voor een copyright? Hier komt de colspan om de hoek kijken. Met colspan kun je aangeven hoeveel kolommen een cel moet beslaan. Om dus een copyright over alle drie de kolommen te plaatsen, schrijf je: Copyright 2015 coding-geeks.de.
Na het toevoegen van deze voettekst moet je de weergave controleren. Het idee is dat de voettekst onder de kolommen wordt geplaatst en de gegevens overzichtelijk presenteert. In dit geval heeft de voettekst geen eigen kolom en zou daarom boven de andere drie kolommen moeten liggen.
Als je nu de colspan naar een waarde van twee reduceert, kun je ook een tweede opmerking toevoegen. Laten we aannemen dat je "Coding Geeks" in een nieuwe kolom wilt weergeven. Gebruik hiervoor de -tag opnieuw, waarbij je colspan correct toepast.
Als je al deze stappen hebt gevolgd, heb je geleerd hoe je basis HTML-tabellen maakt. De visuele styling moet echter altijd via CSS gebeuren om de lay-out en gebruiksvriendelijkheid te verbeteren. Dit omvat het apart stylen van inhoud en lay-out, zodat je later meer flexibiliteit hebt bij het ontwerpen van je webpagina's.
Samenvatting - Basisprincipes van het maken van HTML-tabellen
Je hebt de structuur en het gebruik van HTML-tabellen geleerd, van het opbouwen over het plaatsen van gegevens tot de voettekst. Hiermee kun je nu eenvoudige tabulaire gegevens op je website presenteren.
Veelgestelde vragen
Wat zijn de basis tags voor HTML-tabellen?De basis tags zijn,, voor kopteksten en voor gegevenscellen.
Kan ik onbeperkt veel rijen en kolommen in een tabel aanmaken?Ja, theoretisch kun je veel rijen en kolommen toevoegen, maar het is belangrijk om de leesbaarheid in de gaten te houden.
Hoe moet ik tabellen styliseren?Gebruik CSS voor de vormgeving, in plaats van directe HTML-attributen zoals border.
Waar staat colspan voor?Het colspan-attribuut stelt een cel in staat zich over meerdere kolommen uit te strekken.
Waarom is CSS beter geschikt voor de lay-out dan HTML-attributen?CSS scheidt inhoud van styling en biedt daarmee meer flexibiliteit en mogelijkheden voor ontwerp.
