TABELLEN

Wanneer gebruiken

Tabellen

• Tabellen worden in HTML eigenlijk weinig gebruikt. Ze dienen enkel voor tabulaire data, dus voor gegevens die wanwege hun beketenis in rijen en kolommen moeten staan
• Gebruik het nooit voor layout, dat doen we later met CSS!
• stel je dus de vraag: moeten de gegevens in deze rijen en kolommen staan (dan is het waarschijnlijk een tabel), of kan het ook anders (dan is het waarschijnlijk layout)?

Tabel of niet? (1)

• ja; zonder rijen en kolommen verliezen de gegevens hun betekenis

Tabel of niet? (2)

• nee; er zijn andere manieren om dit weer te geven

Tabel of niet? (3)

• ja; een shopping cart is een soort rekenblad met rijen en kolommen

TABELLEN

Tabellen in HTML

Rijen en cellen

• Eenvoudigste versie met <table>, <tr> en <td>:

  <table>
    <tr>
      <td>Uur</td>
      <td>Band</td>
      <td>Genre</td>
    </tr>
    <tr>
      <td>20:00</td>
      <td>Cloon</td>
      <td>Complex, Freaky, Rock&Rollah</td>
    </tr>
    <tr>
      <td>21:30</td>
      <td>Marvelas</td>
      <td>Jazzy funky hiphop</td>
    </tr>
    <tr>
      <td>23:00</td>
      <td>Stash</td>
      <td>Rock</td>
    </tr>
    <tr>
      <td>01:00</td>
      <td>Moiano</td>
      <td>Souljazz</td>
    </tr>
  </table>
  

  demo

Caption en header cellen

• Uitgebreide versie met <caption> (bijschrift bovenaan) en <th> (headercellen bovenaan):

  <!-- table HTML code starts here -->
  <table>
    <caption>Programma woensdag 20 juli 2022</caption>
    <tr>
      <th>Uur</th>
      <th>Band</th>
      <th>Genre</th>
    </tr>
    <tr>
      <td>Hour</td>
      <td>Band</td>
      <td>Genre</td>
    </tr>
    <tr>
      <td>20:00</td>
      <td>Cloon</td>
      <td>Complex, Freaky, Rock&Rollah</td>
    </tr>
    <tr>
      <td>21:30</td>
      <td>Marvelas</td>
      <td>Jazzy funky hiphop</td>
    </tr>
    <tr>
      <td>23:00</td>
      <td>Stash</td>
      <td>Rock</td>
    </tr>
    <tr>
      <td>01:00</td>
      <td>Moiano</td>
      <td>Souljazz</td>
    </tr>
  </table>
  

  demo

[Thead, tfoot and tbody]

• Nog uitgebreidere versie met onderverdeling in <thead>, <tfoot> en <tbody> secties:

  <table>
    <caption>...table caption...</caption>
    <thead>
      <tr>
        ...table header content
      </tr>
    </thead>
    <tfoot>
      <tr>
        ...table footer content
      </tr>
    </tfoot>
    <tbody>
      <tr>
        ...table data row
      </tr>
      <tr>
        ...table data row
      </tr>
    </tbody>
    <tbody>
        ...
    </tbody>
  </table>

• enkel handig als je bv. een vaste header en een apart scrollbare body wil

[Colspan en rowspan]

• Voeg cellen samen met colspan en rowspan:

  <table>
    <caption>Programma Gentse feesten 2005</caption>
    <tr>
      <td rowspan="2"></td>
      <td colspan="2">Woensdag 20 juli</td>
      <td colspan="2">Donderdag 21 juli</td>
    </tr>
    <tr>
      <th>Uur</th>
      <th>Groep</th>
      <th>Uur</th>
      <th>Groep</th>
    </tr>
    <tr>
      <td rowspan="3">Vroege avond</td>
      <td>19:30</td>
      <td>Cloon</td>
      <td>19:30</td>
      <td>Sadko</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>20:30</td>
      <td>Veres</td>
    </tr>
    <tr>
      <td>21:30</td>
      <td>Marvelas</td>
      <td>21:30</td>
      <td>The Kolinda Project</td>
    </tr>
    <tr>
      <td rowspan="2">Late avond</td>
      <td>23:00</td>
      <td>Stash</td>
      <td>23:00</td>
      <td>Warsaw Village Band</td>
    </tr>
    <tr>
      <td>01:00</td>
      <td>Moiano</td>
      <td>01:00</td>
      <td>La Caravane Elektro</td>
    </tr>
  </table>

  demo