Mi-Soft.nl



avatar Tabellen op uw website. 29-09-2013

Hallo allemaal! In de tutorial van vandaag kijken we naar: tabellen. Het eindresultaat ziet er ongeveer zo uit:
image

Via het menu hieronder kunt u snel naar een deel van de tutorial springen:

De syntax

Om een tabel te maken hebben we 3 dingen nodig:

Kolommen (of cellen) zitten altijd in een rij en een tabel kan uit meerdere rijen bestaan.
Hieronder een voorbeeld van een tabel met 1 rij en 2 kolommen:

<table>
	<tr>
		<td> een cel </td>
		<td> een cel </td>
	</tr>
</table>

tr, td en th

Zoals u misschien hierboven al heeft gezien staat tr voor table row, en td voor tabel data (cel). th is echter weer een andere tag. th staat voor "table header", oftewel de titelrij. th vervangt een td en zal ervoor zorgen dat de tekst automatisch dikgedrukt en gecentreerd word. Hieronder een voorbeeld met th:

<table>
	<tr>
		<th> een header </th>
		<td> een cel </th>
	</tr>
</table>
een header een cel

colspan en rowspan

Met behulp van een colspan of rowspan kunnen we cellen aan elkaar koppelen. Dit is bijvoorbeeld handig als u één cel wilt hebben i.p.v 4 kleintjes. Als we even kijken naar de bovenkant van de pokertabel dan kunnen we zien dat de bovenste rij 1 cel heeft. En de 2de en 3rde rijen hebben een mix van 2 of 5 cellen.

image

Dit wordt dus mogelijk gemaakt door rowspan en colspan. Als u een cel over 2 kolommen wilt uitspreiden (in een 2 cel weide tabel) dan doet u dat als volgt:

<table>
	<tr>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td colspan = "2">
		</td>
	</tr>
</table>
cel cel
cel

Zoals u kunt zien bestaat deze tabel uit 2 rijen, de eerste rij heeft ook 2 cellen. De 2de rij heeft echter maar 1 cel (td) maar dan met colspan = "2", dit zorgt er dus voor dat de cel 2 cellen breed wordt. Met rijen gaat dit ook, en dan ziet het er als volgt uit:

<table>
	<tr>
		<td rowspan = "2">
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
</table>
cel cel
cel

Hier ziet u dus dat we rowspan = "2" toepassen op een cel, niet op een complete rij. Als u hier verder nog mee wilt oefenen kunt u de projectbestanden hier downloaden.

De poker scorekaart maken

Als we nog eens kijken naar de pokerkaart dan zien we dat we met een aantal dingen rekening moeten houden:

Nu we weten welke rijen we colspan en rowspan moeten geven kunnen we de tabel gaan maken. We beginnen met een tabel die 3 rijen en 5 kolommen heeft, ook zetten we de foto's en tekst vast in de cellen:


<table border = "1">
	<tr>
		<th>
			Pokeren
		</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>
			<img src = "images/kaarten.png" alt = "Kaarten" 
				width = "80" height = "58" />
		</td>
		<th>
			Score
		</th>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr id = "medalrow">
	<td></td>
		<th>
			<img src = "images/brons.png" alt = "brons"
				width = "16" height = "16" />
		</th>
		<th>
			<img src = "images/zilver.png" alt = "zilver"
				width = "16" height = "16" />
		</th>
		<th>
			<img src = "images/goud.png" alt = "goud"
				width = "16" height = "16" />
		</th>
		<th>
			<img src = "images/totaal.png" alt = "totaal"
				width = "16" height = "16" />
		</th>
	</tr>
</table>

We zien dan 2 dingen:

Nu moeten we de colspan en rowspan tags toevoegen die we eerder hebben besproken, ik zal dit voordoen met de eerste:

<th colspan = "5">
	Pokeren
</th>

Zoals u kunt zien heb ik de eerste cel 5 cellen breed gemaakt, en daardoor kunnen de andere cellen weg.

De projectbestanden

Klik hier om de projectbestanden te downloaden.

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn