Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

HTML – tabel

Het maken van een tabel in HTML kan handig zijn om een site mooi in te delen of om data uit een database mooi op het scherm te zetten. De meningen over het indelen van een site via tabellen zijn verdeeld. Ondanks deze discussie zijn sites met een tabel indeling vaak beter te lezen op IPads of soortgelijke apparaten. Maar maak zelf een keuze en ga ervoor……

Table tag om tabel te maken

Voorbeeld van een tabel:

Hallo A Hallo B

In HTML ziet dit voorbeeld er als volgt uit:

<table>
<tr>
<td>Hallo A</td>
<td>Hallo B</td>
</tr>
</table>

Een tabel begin je altijd met <table> en eindig je met </table>. Hiermee leg je de basis van de tabel. vervolgens heeft een tabel rijen. De html code daarvoor is <tr>…</tr> waarbij tr staat voor table row. En binnen iedere rij heb je cellen waarin je de inhoud wilt zetten, in html is dit de <td>…</td> tag. De td staat hier voor table data.

Vervolg table

Je kunt nu een basis tabel maken. Maar een tabel heeft nog veel mogelijkheden om mee te spelen. Als je data wilt weergeven uit een database, dan wil je dat de eerste rij van de tabel een andere opmaak heeft. Deze opmaak moet duidelijk maken wat voor informatie je bezoeker in die rijen eronder kan vinden. Dit kun je in html doen door gebruik te maken van de <th>…</th> tag. De th staat voor table header.

<table> 
<tr>
<th>Titel Rij A</th>
<th>Titel Rij B</th>
</tr>
<tr> 
<td>Hallo A</td> 
<td>Hallo B</td> 
</tr> 
</table>

Voorbeeld <th>…<th> gebruik:

Titel Rij A Titel Rij B
Hallo A Hallo B

De <th> tag heeft standaard als opmaak dat je de titel centreert en dikgedrukt weergeeft. Via CSS kun je daar vervolgens natuurlijk weer mee spelen. Het is wel handig om de <th> te gebruiken, als je bijvoorbeeld aan de slag gaat met PHP en gegevens uit een database. Een goede naam voor de table header zorgt er voor dat je later de site makkelijker kunt onderhouden. Stel je voor dat je twintig pagina’s hebt met allerlei tabellen op één pagina en je moet een specifieke rij hebben om iets aan te passen. Dan is het handig om deze rij snel te kunnen vinden aan de hand van een goede titel omschrijving.

 <table> tag en attributen

Een tabel kun je natuurlijk verder opmaken door gebruik te maken van de attributen die horen bij de <table> tag.

  • border=”…” : geeft de rand van de tabel een dikte, kan van 0 tot een x getal. In de praktijk zal je dit beperken van 0 tot ongeveer 3.
  • cellpadding=”…” : geeft de witruimte aan tussen de wand van de cel en de tekst van de cel. Je geeft de witruimte aan het gewenste aantal pixels.
  • cellspacing=”…” : geeft de witruimte aan tussen de cellen onderling. Je geeft de gewenste ruimte tussen de cellen aan in pixels.
  • width=”…” : geeft de breedte van de table aan. Je kunt dit in absoluut aantal pixels of relatief via procenten doen.

Om de tabel verder mooi te kunnen vormgeven via CSS ondersteunt de <table> tag ook de attributen id=”…” en class=”…”. Via een van deze attributen kun je de tabel in je CSS sheet aanmaken en vervolgens van de juiste vormgeving voorzien.