Les 4: HTML, tabellen

Je kunt ook tabellen maken met HTML. Zoals je weet bestaat een tabel uit rijen en kolommen. Een tabel maak je met de <table>-tag. Voor elke rij die je in de tabel wil, zet je een <tr>-tag tussen de <table>-tag. En per kolom zet je een <td>-tag in de . Vergeet de <tr> en <td>-tags niet af te sluiten.

<h1>Topscorers Nederlands elftal</h1>
  <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
  </table>

We gaan de tabel uitbreiden met nog een rij. Denk erom dat de nieuwe rij ook weer twee kolommen moet hebben.

 <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
    <tr>
      <td>Van Persie</td>
      <td>96</td>    
    </tr>
  </table>

Cool hé? Je mag natuurlijk meer rijen en kolommen maken, maar er is één belangrijke voorwaarde: Het aantal kolommen per rij moet voor iedere rij gelijk zijn!

Als we een tabel willen hebben met lijntjes, dan kunnen we in de table-tag een border opgeven van bijvoorbeeld 1 pixel.

table border="1px">
  ..
</table>

Probeer het uit in je 'eigen' site...

Meestal zet je in de eerste rij van je tabel de titel van een kolom. Die wil je dan ook dikgedrukt maken. Dat gaat automatisch als je in de eerste rij de <th>-tag gebruikt, i.p.v. de <td> -tag.

<table>
    <tr>
      <th>Naam</th>
      <th>Aantal doelpunten</th>    
    </tr>
</table>

Je mag naast tekst ook plaatjes of linkjes in een tabel zetten. Dat doe je door ze in de <td>-tag te plaatsen.

<tr>
  <td><a href="http://www.google.com">Google</a></td>    
  <td><img src="plaatje.jpg"></td>
</tr>  

Opdrachten

[1] Maak een nieuwe alinea onderaan je webpagina. Zet er een kopje boven met de tekst Top 5 beste sporters.

[2] Maak nu een tabel met zes rijen en drie kolommen. Zet daarin jouw top 5 van de beste sporters.

[3] Pas de tabel nu zo aan, dat je kan klikken op de naam van de sporter. Als je er op klikt, dan kom je op een Wikipedia-pagina waar je wat meer informatie kan vinden over de desbetreffende speler.

[4] Maak nu een vierde kolom per rij. In deze vierde kolom zet je een kleine foto van de speler in de tabel. Je kunt met Google zoeken naar kleine foto's door de Zoekhulpmiddelen te gebruiken. Kies bij de grootte voor Gemiddeld (zie pijltje hieronder).

Je zou ook het formaat van een grote foto kunnen verkleinen. Daarvoor stel je of de breedte of de hoogte van een <img>-tag in. Dat ziet er dan bijvoorbeeld zo uit:

<img width="200px" src="jouwplaatje.jpg">