|
 Op HTML-pagina’s wordt nog zeer veel gebruikt gemaakt van tabellen. Meestal worden tabellen gebruikt om gegevens overzichtelijk weer te geven. En tabellen bieden een belangrijke mogelijkheid om teksten en plaatjes in horizontale richting op de gewenste plaats te zetten. Tegenwoordig wordt dit meestal gedaan door een stylesheet.
En met de WYSIWYG editors van nu hoef je zelf niet meer een tabel in html code te maken maar kun je er snel een toevoegen aan je website. Toch wordt er door veel webmasters nog gewone htmlcode gebruikt. Dit artikel gaat over tabellen maken in HTML code.
Opbouw standaard tabel
Een tabel bevat één of meerdere rijen en elke rij bevat één of meer cellen. In de cellen komt de informatie die je wilt opnemen in de tabel. Cellen die onder elkaar liggen vormen een kolom. Het aantal cellen in een rij bepaalt het aantal kolommen. Tabellen worden opgebouwd met behulp van de elementen TABLE, TR en TD.
Je begint een tabel altijd met de <TABLE> tag. Vervolgend begin je een rij met de <TR> tag. TR staat voor Table Row. Hierna plaats je een cel met de <TD> tag. TD staat voor Table Data. Na de <TD> tag zet je de informatie die je in de betreffende cel op wilt zetten. De eindtags </TD> en </TR> zijn niet verplicht en worden bijna altijd weg gelaten. Na de informatie in je cel kun je direct een nieuwe cel beginnen met de <TD> tag. Als je alle cellen van je rij in hebt gevuld begin je de volgende rij weer met <TR>. Als je alle cellen in de rijen en kolommen hebt ingevuld sluit je de tabel af met de eindtag </TABLE>.
Attributen van de <TABLE> tag
Het element <TABLE> bevat de volgende attributen:
Border: met dit attribuut stel je de dikte van de rand van de tabel in. De waarde 0 betekent: geen rand.
Bgcolor: hiermee definieer je de achtergrondkleur van de hele tabel.
Width: hiermee stel je de breedte in van de tabel, in pixels of een percentage. Percentage is het handigste, want dan hoef je niet op de browserinstellingen van je bezoekers te letten.
Align: Hiermee regel je de uitlijning voor de hele tabel. Mogelijke waarden zijn: left,center en right.
Cellpadding: hiermee kun je een witruimte creëren tussen de rand van de cel en de inhoud van de cel instellen. De waarde die je opgeeft, is in pixels. De standaardwaarde is 1.
Cellspacing: dit stelt een ruimte in tussen de verschillende cellen in een tabel. Ook hier is de waarde weer in aantallen pixels. De standaardwaarde is hier 2.
Caption: Hiermee kun je een bijschrift plaatsen bij de tabel.
Attributen van de <TR> tag
Het element <TR> bevat de volgende attributen:
Align: hiermee kun je de inhoud van een hele rij uitlijnen, de waarden zijn: left, center en right.
Valign: hiermee kun je de verticale uitlijning van de inhoud van de rij bepalen. Mogelijke waarden: top, center en bottom.
Bgcolor: hiermee stel je de achtergrondkleur in van de hele tabelrij.
Attributen van de <TD> tag
Het element <TD> bevat de volgende attributen:
Width: stelt de breedte in van de cel. Je kunt de waarden opgeven in pixels en percentages.
Bgcolor: hier kun je een achtergrondkleur voor de cel invullen.
align: hiermee lijn je de inhoud van de cel uit. Mogelijke waarden: left, center of right.
valign: regelt de verticale uitlijning van de inhoud van de cel. De waarden die je hier kunt invullen zijn: top, center of bottom.
colspan: bepaalt het aantal kolommen dat de cel inneemt. Je gebruikt dit attribuut als je bijvoorbeeld in de eerste rij van je tabel vier cellen hebt, en je wilt maar drie cellen in de tweede rij. Colspan voegt dan eigenlijk twee cellen samen en zorgt ervoor dat alle cellen weer evengroot zijn over de breedte van de tabel. Als je dit attribuut niet gebruikt maakt de browser zelf twee lege cellen bij.
rowspan: bepaalt het aantal rijen dat de cel inneemt. Zo kan je eerste cel in je tabel bijvoorbeeld één rij gebruiken, en de tweede cel twee rijen.
Inhoud van een cel
De inhoud van een cel hoeft niet alleen tekst te zijn. Een cel kan ook elementen bevatten voor het structureren van tekst, lijsten, afbeeldingen en formulieren. Daarnaast kan een cel ook weer een nieuwe tabel bevatten. Dit wordt wel het nesten van tabellen genoemd. Voor veel onderdelen van tabellen kan de weergave bepaald worden met behulp van stylesheets (Css bestanden).
Meer elementen en attributen
In versie HTML 4.0 zijn nieuwe elementen en attributen opgenomen, waarmee er meer mogelijkheden zijn bij het maken van tabellen. Het betreft de elementen THEAD, TFOOT, TBODY, COLGROUP en COL, en de attributen FRAME en RULES van het TABLE element. Deze elementen en attributen worden door alle grote browsers ondersteund.
THEAD, TFOOT en TBODY groeperen de rijen van een tabel in rijgroepen. Je hebt een rijgroep header, footer en body. De cellen in de rijen die tot de header en de footer behoren bevatten informatie over de kolommen. De cellen in de rijen die tot de body behoren bevatten de tabelgegevens. Aan de elementen THEAD, TFOOT en TBODY kunnen attributen toegevoegd worden, waarmee de uitlijning van de inhoud van de cellen in de betreffende rijgroep in één keer bepaald kan worden.
De elementen COLGROUP en COL hebben betrekking op de kolommen in een tabel. Ze worden direct na het TABLE element geplaatst en geven de browser informatie over het aantal kolommen, voordat alle tabelgegevens zijn ontvangen.
Met de attributen FRAME en RULES van het TABLE element kan bepaald worden welke randen van de tabel weergegeven moeten worden. Het FRAME attribuut heeft betrekking op het kader van de tabel, ofwel de rand aan de buitenzijde, het RULES attribuut controleert de weergave van de lijnen tussen de rijen en kolommen.
|
