HTML en CSS leren: Tabellen

Tabellen

"Waar staan onze openingsuren?" vraagt Hilde. Ergens in de derde alinea, tussen het telefoonnummer en het rekeningnummer voor giften. Een tabel zet ze in één oogopslag op een rij.

Rijen en cellen

Een tabel ken je uit Excel, of als resultaat van een SQL-query: rijen en kolommen. In HTML bouw je ze rij per rij.

<table> is de hele tabel. Elke rij is een <tr>, van "table row". Elke cel in die rij is een <td>, van "table data".

Kolommen typ je niet: de eerste <td> van elke rij vormt samen de eerste kolom, de tweede de tweede kolom.

In de boom zie je ook een <tbody> die je niet typte. Die zet de browser er zelf rond je rijen.

index.html

1<main>2  <h2>Openingsuren</h2>3  <table>4    <tr>5      <td>Woensdag</td>6      <td>13 tot 17 uur</td>7    </tr>8    <tr>9      <td>Zaterdag</td>10      <td>10 tot 16 uur</td>11    </tr>12  </table>13</main>

asiel.example

Koppen in een tabel

De bovenste rij zegt wat er in elke kolom staat, net als de kolomnamen boven een SQL-resultaat of de eerste rij van een Excel-blad. Die cellen maak je met <th>, van "table header", in plaats van <td>.

Een <th> is standaard vet, en hier geeft de CSS van het asiel hem een achtergrond. Belangrijker: een voorleesprogramma leest bij elke cel de kop voor, zoals "Leeftijd: 8 jaar". Zonder koppen hoort de bezoeker alleen losse woorden.

index.html

1<main>2  <h2>Zoekt een thuis</h2>3  <table>4    <tr>5      <th>Naam</th>6      <th>Soort</th>7      <th>Leeftijd</th>8    </tr>9    <tr>10      <td>Rex</td>11      <td>hond</td>12      <td>8 jaar</td>13    </tr>14    <tr>15      <td>Minou</td>16      <td>kat</td>17      <td>2 jaar</td>18    </tr>19  </table>20</main>

asiel.example

Probeer het zelf

Zet de openingsuren in een tabel met de koppen Dag en Uren, en daaronder Woensdag met 13 tot 17 uur en Zaterdag met 10 tot 16 uur.

1<main>2  <h2>Openingsuren</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.kaart {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.kaart h3 {51  margin: 4px 0;52}53.kader {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.ras {59  color: #b5541c;60}61.dicht {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Rijen en cellen

Een tabel ken je uit Excel, of als resultaat van een SQL-query: rijen en kolommen. In HTML bouw je ze rij per rij.

<table> is de hele tabel. Elke rij is een <tr>, van "table row". Elke cel in die rij is een <td>, van "table data".

Kolommen typ je niet: de eerste <td> van elke rij vormt samen de eerste kolom, de tweede de tweede kolom.

In de boom zie je ook een <tbody> die je niet typte. Die zet de browser er zelf rond je rijen.

index.html

1<main>2  <h2>Openingsuren</h2>3  <table>4    <tr>5      <td>Woensdag</td>6      <td>13 tot 17 uur</td>7    </tr>8    <tr>9      <td>Zaterdag</td>10      <td>10 tot 16 uur</td>11    </tr>12  </table>13</main>

asiel.example

Koppen in een tabel

index.html

1<main>2  <h2>Zoekt een thuis</h2>3  <table>4    <tr>5      <th>Naam</th>6      <th>Soort</th>7      <th>Leeftijd</th>8    </tr>9    <tr>10      <td>Rex</td>11      <td>hond</td>12      <td>8 jaar</td>13    </tr>14    <tr>15      <td>Minou</td>16      <td>kat</td>17      <td>2 jaar</td>18    </tr>19  </table>20</main>

asiel.example

Probeer het zelf

Zet de openingsuren in een tabel met de koppen Dag en Uren, en daaronder Woensdag met 13 tot 17 uur en Zaterdag met 10 tot 16 uur.

1<main>2  <h2>Openingsuren</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.kaart {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.kaart h3 {51  margin: 4px 0;52}53.kader {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.ras {59  color: #b5541c;60}61.dicht {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example