Om informatie op een overzichtelijke manier op een webpagina te kunnen laten zien, kan het heel handig zijn om een tabel te gebruiken. Met een tabel kun je de plek op de pagina van bepaalde stukken tekst, plaatjes en dergelijke nauwkeurig bepalen.
Een tabel is opgebouwd uit rijen en kolommen.
Het kruispunt van een specifieke rij en een specifieke kolom noemen we een cel (denk aan Excel, dat gaat precies zo).
Table-tag
Als je begint zul je de browser eerst moeten vertellen dat je een tabel wilt maken. Dat gaat met de table tag en aan het eind van je tabel met het einde table-tag. De table tag heeft het attribuut border. Met border regel je of er lijntjes om je tabel zichtbaar zijn en hoe dik die moeten worden. Gebruik je het border attribuut niet of gebruik je border = 0 dan zie je geen lijntjes.
Tr- en td-tag
Nadat je je browser hebt verteld dat je een tabel wilt maken moet je ook nog zeggen hoe het zit met de rijen en kolommen van je tabel, en wat er in de cellen moet komen te staan.
Iedere nieuwe rij in je tabel begint met een tr-tag "<tr>". (tr komt van table row). De rij eindigt met een einde tr-tag "</tr>".
Iedere nieuwe cel in je rij begint met een td-tag "<td>" ( td komt van table data) en eindigt met een einde td-tag "</td>".
Als je het in een tabel zou zetten ziet het er dus zo uit:
Opdracht 12
Maak nu zelf een tabel met twee rijen en twee kolommen. Zet in alle cellen tekst. Zorg dat er een smal lijntje om je tabel wordt weergegeven.
Tip: teken eerst voor jezelf de tabel en schrijf "<tr>,</tr>, <td> en </td>" op de juiste plaatsen. Dat helpt om je code goed op te schrijven. Kijk naar het voorbeeld.
Laat het eindresultaat zien aan je docent.