Datatabellen geven verschillende informatie weer in kolommen en rijen voor eenvoudig lezen. De gegevens zijn meestal gedeeltelijk numeriek met tekstlabels. Een voorbeeld is een gegevenstabel die laat zien hoeveel calorieën iemand elke dag eet. Online een gegevenstabel maken kan met HTML of de complexere CSS-browsertaal. De laatste tabel lijkt op een gegevenstabel die is gemaakt in een spreadsheet of op papier. Het enige verschil is de achtergrondcodering, die alleen wordt gezien als naar de broncode wordt gekeken. De codering kan worden gemaakt door HTML-editors, tekst of op andere manieren. Er zijn veel sites online die de mogelijkheid bieden om gegevens in te voeren, een paar attributen in te stellen en alle codering van de tabel voor u te maken. Online gegevenstabellen worden meestal gebruikt als onderdeel van een webpagina. Gegevenstabellen worden vaak gebruikt om lijsten met artikelen met categorieën te maken, zoals artikelen die te koop zijn. Sommige webpagina's gebruiken ze om statistieken ter informatie te tonen. Hoewel gegevenstabellen offline kunnen worden gebruikt voor afdrukken of in rapporten, is het meestal beter om spreadsheetsoftware te gebruiken, zoals Microsoft Office Excel, die veel meer functies biedt voor het werken met gegevens. Deze gids laat zien hoe u een HTML-gegevenstabel maakt met Kladblok .

Open een HTML-editor of gewoon een Kladblok-tekstdocument om de HTML-code in te voeren. Kladblok werkt goed als u gewend bent aan HTML-codering. HTML-editors maken repetitieve taken sneller, maar sommige, zoals Frontpage, voegen extra, onnodige codering toe die webpagina's kan vertragen. Het beste is om eerst code te maken met een HTML-editor, daarna terug te gaan en de code handmatig te bewerken om deze op te ruimen.


Bepaal de tabelkenmerken voor de rand, breedte, achtergrondkleur en lettertypekleuren. U moet rekening houden met de lay-out van de webpagina, de breedte, de kleuren en andere kenmerken om de tabel gemakkelijk leesbaar te maken. U moet ook beslissen hoeveel rijen en kolommen nodig zijn voor de gegevens. Begin met het definiëren van de attributen van de tabel. (Ons voorbeeld toont het aantal calorieën dat elke weekdag tijdens de lunch en het diner wordt gegeten. We hebben drie kolommen (Dag, Lunch en Diner) en zeven rijen (twee voor labels en één voor elke weekdag) nodig.


Voeg een toe rand rond de tabel en gegevenscellen. Randen scheiden de gegevens in cellen voor eenvoudige weergave. Het wordt gemeten in pixels en kan een waarde van 0 krijgen om ze niet te gebruiken. Een rand van één of twee pixels is over het algemeen prima. De tag voor de rand is


De randkleur kan worden gewijzigd met de tag


die de basiskleuren gebruikt, zoals rood of zwart of zescijferige hexadecimale kleurcodes. Hexadecimalen bieden meer kleuren. Onze voorbeeld gebruikt border \u003d "2" en bordercolor \u003d "black".


Bepaal de breedte van de hele tabel. Het wordt gemeten in pixels of procent van de schermgrootte. Pixels zijn definitief en percentages stellen de tabel in staat zich aan te passen aan verschillende schermformaten. Probeer de breedte te beoordelen op basis van de breedte van de gegevens over de rijen. Als u later ontdekt dat de tabel te dun is of breed, het kan worden gewijzigd. Ons voorbeeld gebruikt width \u003d "175".


Stel de achtergrondkleur van de gegevenscellen in. Het is anders dan de achtergrondkleur van de pagina, die een goed contrast kan bieden. De tag is


net als de randkleur. Ons voorbeeld gebruikt bgcolor \u003d "white".


Stel de lettertypekleur van de tekst in de cellen in. Zorg ervoor dat de kleur goed contrasteert met de achtergrond, zodat deze gemakkelijk leesbaar is. Licht op donker of donker op licht werkt altijd het beste. De tag is


Ons voorbeeld is font \u003d "black", wat goed contrasteert met de witte achtergrond.


Schrijf de volledige tabel-tags tussen een linker- en rechterpijl met een spatie tussen tag-attributen en beginnend met de tabeltag vooraan. De volgorde van de tags maakt niet uit, zolang "tabel" vooraan staat.


Bepaal de kolombreedtes. De breedte van elke kolom is afhankelijk van de breedte van de hele tabel. Neem de tabelbreedte en deel deze door het aantal cellen om kolommen van gelijke grootte te krijgen. Pas indien nodig de kolombreedten aan, maar het totaal mag de tabelbreedte niet overschrijden. Wanneer de breedte van een cel verandert, moeten de andere cellen worden aangepast om de totale tafelbreedte te bereiken. (Ons voorbeeld heeft een breedte van 175 en drie kolommen per rij, dus een even verdeling van ongeveer 59. De werkelijke verdeling is 70, 60, 40.)


Begin met het toevoegen van uw gegevens. Begin eerst een nieuwe regel en voeg een tabelrij toe met de code . Voeg vervolgens een tabel-gegevenstag toe


Voer uw gegevens voor de cel in; met deze code om lege cellen weer te geven:


Sluit de cel met de tag . De tag bordercolor wordt gebruikt om desgewenst de randkleur van de cel op te geven. Als dit wordt weggelaten, wordt de standaard tabelrandkleur gebruikt. De eerste celcode van ons voorbeeld is:


Herhaal het maken van tabelgegevenscellen, elk op een nieuwe regel, totdat alle cellen in de rij compleet zijn. Eindig de rij met de tag . Begin de volgende rij met hetzelfde proces, opnieuw beginnend met de tag .


Sluit de tabelcode met de tag met . Onze laatste tabelcode, indien beëindigd na twee rijen met gegevens, staat hieronder.