Les 2 een eerste opzet in html

fig 2.1
<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voorbeeldpagina</title>
</head>

<body>
<h1>Welkom op mijn website</h1>
<p>Dit is een  eenvoudige HTML-structuur.</p>
<table>
	<tr>
		<td>rij 1 kolom 1</td>
		<td>rij 1 kolom 2!</td>
	</tr>
	<tr>
		<td>rij 2 kolom 1</td>
		<td>rij 2 kolom 2</td>
	</tr>
</table>
</body>
</html>

hieronder het resultaat van het hierboven staande

Rij 1 kolom 1	Rij 1 kolom 2
Rij 2 kolom 1	Rij 2 kolom 2

Hierboven zie je een eenvoudige tabel. De tag <tr> maakt een rij en <td> maakt de kolommen binnen die rij. Met de attributen rowspan en colspan kun je cellen samenvoegen, zodat rijen of kolommen gecombineerd worden. Als laaste maakt border de randen van de cellen zien. In het voorbeeld hieronder zie je hoe dat werkt. Daarnaast kun je met CSS ook randen, kleuren en afgeronde hoeken toevoegen aan de tabel (fig. 2.2). Dit volgt later in de lessen voor CSS.

fig 2.2
<table border="1">
	<tr>
		<td colspan="1">rij 1 kolom 1</td>
		<td colspan="2">rRij 1 kolom 2 en 3</td>
	<tr>
		<td>rij 2 kolom 1</td>
		<td>rij 2 kolom 2</td>
		<td>rij 2 kolom 3</td>
	</tr>
</table>

Dit geeft weer als resultaat:

(fig 2.3)

Rij 1 kolom 1	Rij 1 kolom 2 en 3
Rij 2 kolom 1	Rij 2 kolom 2	Rij 2 kolom 3

Met CSS (Cascading Style Sheets) kunnen we straks alle eigenschappen van de tabel vormgeven: kleuren, randen, afgeronde hoeken en nog veel meer.

Vragen

1. Met welke tag start je een tabel.
2. Met welke tag eindig je een tabel.
3. Met eigenschap geef je een rand aan de cellen van de tabel.
4. Met welke tag start je een rij.
5. Wat betekend CSS en wat kan je hiermee.
6. Maak zelf een eerste opzet met html format en tabellen.
7. Upload dit en kijk of het werkt.

Ga naar de volgende les