Gegevenstabellen geven verschillende informatie weer in kolommen en rijen om ze gemakkelijk te kunnen lezen. De gegevens zijn meestal deels numeriek met tekstlabels. Een voorbeeld is een gegevenstabel die laat zien hoeveel calorieën iemand per dag eet. Het online maken van een datatabel kan met HTML of de meer complexe CSS browsertaal. De finaletafel ziet eruit als een gegevenstabel die in een spreadsheet of op papier is gemaakt. Het enige verschil is de codering op de achtergrond, die niet zichtbaar is tenzij 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 tabelcodering 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 voor informatie weer te geven. Hoewel gegevenstabellen offline kunnen worden gebruikt voor afdrukken of in rapporten, is het meestal beter om te gebruiken spreadsheetsoftware, zoals Microsoft Office Excel, die veel meer functies biedt om te werken met gegevens. Deze handleiding laat zien hoe u een HTML-gegevenstabel maakt met Kladblok.
Open een HTML-editor of gewoon een gewoon Kladblok-tekstdocument om HTML-code in te voeren. Kladblok werkt goed als je 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 te coderen met een HTML-editor, dan terug te gaan en de code met de hand te bewerken om het op te schonen.
Bepaal de tabelattributen voor de rand, breedte, achtergrondkleur en lettertypekleuren. U moet rekening houden met de lay-out, breedte, kleuren en andere kenmerken van de webpagina om de tabel gemakkelijk leesbaar te maken. U moet ook beslissen hoeveel rijen en kolommen er nodig zijn voor de gegevens. Begin met het definiëren van de tabelkenmerken. (Ons voorbeeld toont het aantal calorieën dat op elke doordeweekse dag wordt gegeten tijdens de lunch en het diner. We hebben drie kolommen nodig (Dag, Lunch en Diner) en zeven rijen (twee voor labels en één voor elke weekdag).
Voeg een rand toe rond de tabel en gegevenscellen. Randen scheiden de gegevens in cellen zodat ze gemakkelijk kunnen worden bekeken. 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
bgcolor=border="CHOSEN_BORDER_WIDTH"
De randkleur kan worden gewijzigd met de tag
bordercolor="CHOSEN_COLOR"
die gebruikmaakt van de basiskleuren, zoals rood of zwart of zescijferige hexadecimale kleurcodes. Hexadecimalen bieden meer kleuren. Ons voorbeeld gebruikt border="2" en bordercolor="black".
Bepaal de breedte van de hele tafel. Het wordt gemeten in pixels of percentage van de schermgrootte. Pixels zijn definitief en met percentages kan de tabel worden aangepast aan verschillende schermformaten. Probeer de breedte te beoordelen op basis van de breedte van de gegevens over de rijen. Als u er later achter komt dat de tafel te dun of te breed is, kan deze worden gewijzigd. In ons voorbeeld wordt width="175" gebruikt.
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
bgcolor="CHOSEN_COLOR"
net als de randkleur. In ons voorbeeld wordt bgcolor="white" gebruikt.
Stel de letterkleur van de tekst in de cellen in. Zorg ervoor dat de kleur goed afsteekt tegen de achtergrond, zodat deze goed leesbaar is. Licht op donker of donker op licht werkt altijd het beste. De tag is
font="CHOSEN_COLOR"
Ons voorbeeld is font="black", wat goed contrasteert met de witte achtergrond.
Schrijf de volledige tabeltags tussen een linker- en rechterpijl met een spatie tussen de tagattributen en begin met de tabeltag ervoor. De volgorde van de tags maakt niet uit, zolang "tafel" maar vooraan staat.
Bepaal de kolombreedtes. De breedte van elke kolom hangt af 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 een celbreedte verandert, moeten de andere cellen worden aangepast om de tabelbreedte te vergroten. (Ons voorbeeld heeft een breedte van 175 en drie kolommen per rij, dus een gelijkmatige 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
Voer uw gegevens voor de cel in; gebruik deze code om lege cellen weer te geven:
Sluit de cel met de tag. De tag bordercolor wordt gebruikt om desgewenst de kleur van de celrand op te geven. Als deze wordt weggelaten, wordt de standaardkleur van de tabelrand gebruikt. De eerste celcode van ons voorbeeld is:
Herhaal het maken van tabelgegevenscellen, elk op een nieuwe regel, totdat alle cellen in de rij zijn voltooid. Sluit dan de rij af met de tag. Begin de volgende rij met hetzelfde proces, beginnend met de
Sluit de tabelcode af met de with label. Onze code voor de finaletafel, indien beëindigd na twee rijen met gegevens, staat hieronder.
Dingen die je nodig hebt
- HTML-editor of Kladblok
- Gegevens