H7 - Lijsten en tabellen

Je breidt Over uit met vaardigheden en werkwijze, zet het bestaande menu in een lijst en voegt bij Portfolio een compacte projecttabel toe. Alle onderdelen blijven in dezelfde vier pagina’s en gebruiken dezelfde CSS.

Een lijst gebruik je als meerdere onderdelen bij elkaar horen. Denk aan boodschappen, stappen, kenmerken, menu-items of een opsomming van onderwerpen.

• Gebruik een lijst als de onderdelen bij elkaar horen.
• Gebruik geen losse alinea's als het eigenlijk een opsomming is.
• Elke regel in een HTML-lijst staat in een <li>-element.
• li staat voor list item.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

De browser zet standaard bullets voor een ongeordende lijst.

Een ongeordende lijst maak je met <ul>. De volgorde is dan niet het belangrijkste. Het gaat vooral om een verzameling onderdelen.

<h2>Benodigdheden</h2>
<ul>
    <li>Computer</li>
    <li>Browser</li>
    <li>Code-editor</li>
    <li>Map voor je website</li>
</ul>

• Gebruik <ul> voor gewone opsommingen.
• Zet alleen <li>-elementen direct in een <ul>.
• Binnen een <li> mag wel weer tekst, een link of later zelfs een nieuwe lijst staan.

Een geordende lijst maak je met <ol>. Die gebruik je als de volgorde belangrijk is, bijvoorbeeld bij stappenplannen.

<h2>Stappenplan</h2>
<ol>
    <li>Maak een map voor je website.</li>
    <li>Maak een bestand met de naam index.html.</li>
    <li>Open het bestand in je browser.</li>
    <li>Controleer of je pagina zichtbaar is.</li>
</ol>

• De browser zet standaard nummers voor een geordende lijst.
• Gebruik <ol> als stap 1 echt vóór stap 2 moet komen.
• Gebruik <ul> als de volgorde niet veel uitmaakt.

Je kunt een lijst in een lijst zetten. Dat heet nesten. Let goed op dat de binnenste lijst volledig binnen een <li> staat.

<ul>
    <li>HTML
        <ul>
            <li>Headings</li>
            <li>Paragrafen</li>
            <li>Afbeeldingen</li>
        </ul>
    </li>
    <li>CSS
        <ul>
            <li>Kleur</li>
            <li>Padding</li>
            <li>Margin</li>
        </ul>
    </li>
</ul>

• De buitenste lijst heeft twee hoofditems: HTML en CSS.
• In elk hoofditem staat een tweede lijst.
• De binnenste lijst staat dus binnen het bijbehorende <li>-element.
• Net als bij andere containers moet de volgorde van openen en sluiten kloppen.

Een menu is eigenlijk ook een lijst met links. Daarom zie je vaak een <nav> met daarin een <ul>.

<nav>
    <ul>
        <li><a href="index.html" aria-current="page">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="over.html">Over</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

• <nav> geeft aan dat dit navigatie is.
• <ul> geeft aan dat het om een lijst met menu-items gaat.
• Elke link staat in een eigen <li>.
• Later kun je met CSS de bullets weghalen en het menu naast elkaar zetten.

Een tabel gebruik je voor gegevens die logisch in rijen en kolommen staan. Denk aan een rooster, prijslijst, scoretabel of vergelijking.

• Gebruik tabellen voor echte tabeldata.
• Gebruik tabellen niet om een pagina-layout te bouwen.
• Voor layout gebruik je later CSS, zoals flexbox en grid.
• Een tabel moet leesbaar blijven, ook zonder extra vormgeving.

<table>
    <tr>
        <th>Vak</th>
        <th>Dag</th>
        <th>Tijd</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Maandag</td>
        <td>09:00</td>
    </tr>
</table>

Een tabel bestaat uit een <table>-container. Daarin staan rijen. Een rij maak je met <tr>. In een rij staan cellen.

• <table>: de hele tabel.
• <tr>: een table row, dus een rij.
• <th>: een table header, dus een kopcel.
• <td>: table data, dus een gewone cel.

<table>
    <tr>
        <th>Naam</th>
        <th>Leeftijd</th>
    </tr>
    <tr>
        <td>Lisa</td>
        <td>12</td>
    </tr>
    <tr>
        <td>Amir</td>
        <td>13</td>
    </tr>
</table>

Kopcellen worden standaard vet weergegeven. Ze geven betekenis aan de kolommen.

Bij grotere tabellen kun je extra structuur toevoegen. Dat maakt de tabel duidelijker.

• <caption> geeft de tabel een titel of korte beschrijving.
• <thead> bevat de koprij van de tabel.
• <tbody> bevat de gewone gegevensrijen.
• Deze tags helpen mensen en software beter begrijpen wat de tabel voorstelt.

<table>
    <caption>Lesrooster</caption>
    <thead>
        <tr>
            <th>Vak</th>
            <th>Dag</th>
            <th>Tijd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>Maandag</td>
            <td>09:00</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>Woensdag</td>
            <td>10:30</td>
        </tr>
    </tbody>
</table>

Tabellen werken zonder CSS, maar met een paar eenvoudige CSS-regels worden ze veel leesbaarder.

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    border: 1px solid gray;
    text-align: left;
}

th {
    background-color: lightgray;
}

• width: 100% laat de tabel de beschikbare breedte gebruiken.
• border-collapse: collapse laat de randen netjes samenvallen.
• padding geeft de cellen binnenruimte.
• text-align: left zet de tekst links uitgelijnd.
• Gebruik CSS alleen voor vormgeving. De tabelstructuur blijft HTML.

• Gebruik <ul> voor opsommingen waarbij de volgorde niet belangrijk is.
• Gebruik <ol> voor stappenplannen of ranglijsten.
• Zet elk lijstonderdeel in een <li>.
• Nest lijsten alleen als de structuur daardoor duidelijker wordt.
• Gebruik tabellen alleen voor gegevens in rijen en kolommen.
• Gebruik <th> voor kopcellen en <td> voor gewone cellen.
• Geef grotere tabellen bij voorkeur een <caption>.
• Gebruik geen tabellen om de layout van een pagina te maken.