|
|
|
| |||||
| Startpagina >> Tutorials | ||||||||
|
Tutorials en artikels: Tabellen in HTML
Je leest momenteel tutorial/artikel: Tabellen in HTML. 
Tabellen HTMLIn de wiskunde of fysica worden tabellen grotendeels gebruikt om droge cijfergegevens te presenteren. Ook in HTML kan je tabellen voor deze doeleinden gebruiken, maar de mogelijkheden van tabellen in HTML gaan veel verder dan dat.Ga naar een willekeurige site op het internet, en negen kansen op tien is de structuur ontworpen door middel van tabellen, ook al lijken deze niet expliciet aanwezig op de pagina. Een eenvoudige tabel makenWe moeten hoe dan ook beginnen bij het begin. Maak daarom een nieuw HTML bestand aan, enkel om volgende code op uit te proberen.Zet volgende code tussen de <body> tags van je nieuwe bestand. Het resultaat zou moeten lijken op de onderstaande tabel:
Verder bestaat een tabel uit rijen en cellen. Om aan te geven waar een rij begint of eindigt gebruiken we de tag <tr>. Aan deze tag worden doorgaans geen attributen toegekend. Om aan te duiden waar een cel begint of eindigt gebruikt men de tag <td>. Alle attributen die je aan een tabel kunt toekennen, kan je ook aan deze tag toekennen (zie bovenstaand overzicht). Het attribuut colspanStel dat je wilt dat de eerste rij van de tabel uit één cel bestaat, en de rij daaronder weer uit twee. Die cel uit rij één moet verspreid staan over de twee cellen daaronder. Deze techniek wordt veel gebruikt om bijvoorbeeld een tabelheader te maken.Het attribuut dat je dan aan de <td> moet meegeven het colspan attribuut. De waarde die meegegeven wordt duidt Het aantal cellen aan die de huidige cel moet overspannen. Laten we als voorbeeld de voorgaande code als volgt aanpassen. Je zou nu de volgende structuur moeten verkrijgen.
Tabellen als hoofdstructuurZoals eerder gezegd kunnen tabellen je site een professionelere uitstraling geven. In dit laatste voorbeeld nemen we terug het index.htm bij de hand. We gebruiken nu alles wat we in de gehele tutorial hebben gezien!Als alles goed gelopen is, zou je dit resultaat moeten zien. Analyse van de code Onze hoofdtabel bestaat uit drie cellen. De bovenste cel overspant de twee onderste cellen. In elke cel zitten dan weer één of meer tabellen vervat. Het is dus mogelijk om een nieuwe tabel te beginnen in een tabelcel. In de bovenste cel hebben we één nieuwe tabel geplaatst, om het effect van de header te bekomen. Om duidelijk een verschil te maken tussen de verschillende onderdelen van de site, hebben we in de de eerste cel onder de header drie nieuwe tabelletjes gezet. De cel daarnaast bestaat dan weer uit één tabel, waarin de hoofdinformatie staat. We hebben in dit voorbeel wel wat stijldefinities gebruikt die we nog niet eerder tegen kwamen. Een handige site met een compleet overzicht van wat je met CSS kan doen vind je op http://www.w3schools.com/css/ Het kan een tijdje duren vooraleer je werken met tabellen in HTML onder de knie hebt, maar oefening baart kunst. Probeer bijvoorbeeld verschillende structuren uit te werken. Ze eerst tekenen op papier kan een goed hulpmiddel zijn! Je hebt nu een groot deel van de basisprincipes van HTML gezien. Toch zijn er nog enkele aandachtspunten waar veel webmasters te weinig of geen aandacht aan schenken. Deze zogenaamde "valkuilen" vind je in het volgende hoofdstuk. Ga naar "Valkuilen voor webmasters" >>
|
|  Op dit werk is een Creative Commons Licentie van toepassing. webtoolsnation.be | funnynation.be | messengernation.be | | |||||||||||||||||||||||||||||||||||||
