HTML5 - Lijsten en tabellen

• Informatica
• Middelbare school
• havo
• Leerjaar 4

HTML5 - lijsten en tabellen

Leerdoel

Aan het eind van deze les kan je met behulp van HTML5 lijsten en tabellen maken.

Wat zijn lijsten?

Lijsten

Er zijn drie soorten lijsten:

• ongeordende lijst
• geordende lijst
• definitielijst

Ongeordende lijst

<ul>

 <li>Boter</li>

 <li>Kaas</li>

 <li>Eieren</li>

</ul>

Geordende lijst

<ol>

 <li>Boter</li>

 <li>Kaas</li>

 <li>Eieren</li>

</ol>

Definitielijst

<dl>

 <dt>Boter</dt>

 <dd>Gekarnde room van melk.</dd>

 <dt>Kaas</dt>

 <dd>Ook kaas wordt gemaakt van melk.</dd>

 <dt>Eieren</dt>

 <dd>Eieren worden niet gemaakt van melk, maar zijn afkomstig van een kip.</dd>

</dl>

Tabellen

Tabel tekenen

<table>

  <tr>

    <td>Cel 1</td>

    <td>Cel 2</td>

  </tr>

  <tr>

    <td>Cel 3</td>

    <td>Cel 4</td>

  </tr>

</table>

Tabel: randen

<table border="1">

  <tr>

    <td>Cel 1</td>

    <td>Cel 2</td>

  </tr>

  <tr>

    <td>Cel 3</td>

    <td>Cel 4</td>

  </tr>

</table>

Tabel: cellen samenvoegen

(kolommen)

<table border="1">

  <tr>

    <td colspan="2">

    Cel 1 en cel 2</td>

  </tr>

  <tr>

    <td>Cel 3</td>

    <td>Cel 4</td>

  </tr>

</table>

Tabel: cellen samenvoegen

(rijen)

<table border="1">

  <tr>

    <td rowspan="2">

    Cel 1 en cel 3</td>

    <td>Cel 2</td>

  </tr>

  <tr>

    <td>Cel 4</td>

  </tr>

</table>

Opdracht

Maak onderstaande tabel na in HTML5. Zoek zelf een afbeelding van bloemen op het internet.