Cursus HTML - deel 4: tabellen

Trefwoorden: HTML, cursus, tabellen, website, tables

1. inleiding


In dit deel gaan we dieper in op tabellen. Deze zijn heel handig om sommige inhoud (zoals gegevens uit een database, uitslagen of (zoals hier op Multidesk.be) forumberichten mooi weer te geven op je webpagina.
Tabellen zijn in HTML helemaal niet moeilijk weer te geven, maar je hebt er (zoals altijd :p) enkele basistags voor nodig.

2. De basis van tabellen


2.1. basistags voor tabellen

Om de browser te laten weten dat er een tabel op de webpagina moet komen te staan, moeten we dit natuurlijk aangeven met een tag. Simpelweg table genaamd.
CODE - de table tag
  1. <table>
  2. </table>

Bij HTML is het zo dat je eerst de rij definieert en daarna pas de kolom in die rij. Een rij geef je aan met de tr-tag, wat komt van Table Row (of tabelrij).
CODE - tabel met 2 rijen
  1. <table>
  2.         <tr></tr>
  3.         <tr></tr>
  4. </table>

De code hierboven geeft een tabel met 2 rijen weer. Maar daarin zal je nog niets kunnen weergeven omdat je nog geen kolom hebt gedefinieerd. Dit doe je met de td-tag, want komt van Table Data (of tabelgegevens). Hierin plaats je dus alle gegevens die in je tabel weergegeven moeten worden.

2.2. enkele voorbeelden


CODE - tabel met 2 rijen en gegevens
  1. <table>
  2.         <tr>
  3.                 <td>dit is de eerste rij</td>
  4. </tr>
  5. <tr>
  6.                 <td>dit is de tweede rij</td>
  7.  
  8. </tr>
  9. </table>

De bovenstaande code geeft een tabel weer met 2 rijen en gegevens. Zoals je ziet moet je altijd een td-tag aanmaken, ook al heeft je tabel maar twee rijen.

Bovenstaande code geeft dit weer in de browser:
dit is de eerste rij
dit is de tweede rij


CODE - tabel met 2 rijen 2 kolommen
  1. <table>
  2.         <tr>
  3.                 <td>dit is de eerste kolom van de eerste rij</td>
  4.                 <td>dit is de tweede kolom van de eerste rij</td>
  5. </tr>
  6.         <tr>
  7.                 <td>dit is de eerste kolom van de tweede rij</td>
  8.                 <td>dit is de tweede kolom van de tweede rij</td>
  9.  
  10. </tr>
  11. </table>

De bovenstaande code geeft ook een tabel weer met 2 rijen Maar deze keer krijgen we 2 kolommen. Het aantal kolommen in een rij hangt dus af van het aantal keer een td-tag per rij. Voorlopig moet je er nog voor zorgen dat het aantal td-tags per rij gelijk blijft, anders krijg je een afwijking in je tabel (verder in dit deel brengen we daar wel verandering in ;)).

Met bovenstaande code wordt dit weergegeven:
dit is de eerste kolom van de eerste rijdit is de tweede kolom van de tweede rij
dit is de eerste kolom van de tweede rijdit is de tweede kolom van de tweede rij


Verder bestaat er ook nog een th-tag die je als vervanging voor de td-tag kan gebruiken in de eerste rij van je tabel. Deze zet namelijk de inhoud van de cel in het vet. Zo kan je gemakkelijk titels weergeven. Vandaar ook th, komt van Table Head. Maar in dit artikel zal ik het niet meer gebruiken, het wordt gewoon vermeld voor de duidelijkheid &#61514;.

2.3. Enkele opmaakattributen voor tabellen.

2.3.1. breedte en hoogte bepalen

Als je nu de tabel in een browser opent zie je dat deze de breedte aanneemt van hetgeen wat zich in de tabel bevindt. Je kan dit veranderen door het attribut width op de table-tag op td-tag toe te passen. Je kan dit doen in procente, pixels, &#8230;
CODE
  1. <table width="90%">
  2.         <tr>
  3.                 <td width="45%">hier staan gegevens</td>
  4.                 <td width="45%">hier staan gegevens</td>
  5. </tr>
  6. </table>

Deze code geeft een tabel weer die 90% van de breedte van de browser in beslag neemt en waarvan de kolommen elk 45% in beslag nemen, dus de helft van de tabel.

Om de hoogte van een tabel of kolom op te geven kan je hetzelfde doen maar dan het attribuut height gebruiken.

2.3.2. opmaak aan de tabel geven

Je kan in je tabel de rand opmaken en natuurlijk ook de achtergrond. De rond kan je aanpassen door in de table-tag het attribuut border te gebruiken. Hiermee kan je de dikte ervan aangeven. Met het attribuut kan je de border een kleur geven. Zie het vorige deel voor meer informatie over kleuren op je website.
CODE
  1. <table border="1" bordercolor="#000000">
  2.         <tr>
  3.                 <td>hier staan gegevens</td>
  4.                 <td>hier staan gegevens</td>
  5. </tr>
  6. </table>

Hiermee zeg je de browser dat je tabel een randdikte heeft van 1 (hoe groter het getal hoe dikker) en dat die rand een zwarte kleur heeft.

Verder kan je ook het de achtergrondkleur aanpassen. Dit doe je door het attribuut bgcolor toe te passen op je tabel (table) of cel (td).
CODE
  1. <table>
  2.         <tr>
  3.                 <td bgcolor="#00FF00">hier staan gegevens</td>
  4.                 <td>hier staan gegevens</td>
  5. </tr>
  6. </table>

Deze code zorgt er bijvoorbeeld voor dat je eerste cel een groene achtergrondkleur heeft.

2.3.3. ruimte in je tabel

Om je tekst wat meer ruimte te geven bestaat het attribuut celpadding dat je toepast op de cel (td). Hiermee geef je aan wat de afstand tussen de rand en de tekst is.
CODE
  1. <table>
  2.         <tr>
  3.                 <td celpadding="10">Deze tekst heeft heel veel plaats!</td>
  4.                 <td>Deze tekst heeft bijna geen plaats in zijn cel.</td>
  5. </tr>
  6. </table>


Om de ruimte tussen cellen aan te geven bestaat het attribuut celspacing en dit pas je toe op je table-tag
CODE
  1. <table celspacing="5">
  2.         <tr>
  3.                 <td>Deze cellen staan ver van elkaar</td>
  4.                 <td>Deze cellen staan ver van elkaar</td>
  5. </tr>
  6. </table>



3. ingewikkelde tabellen maken.


Je kan natuurlijk ook tabellen opstellen in HTML waarvan sommige cellen 2 kolommen beslaan of sommige kolommen meerdere cellen.
Een voorbeeld daarvan zie je op onderstaande afbeelding.

http://www.multidesk.be/bijlage/52c4d74602de3b840b79268bc688f62a.jpg

Om de eerste tabel te maken gebruik je het attribuut colspan op een cel, zoals in onderstaande code:
CODE
  1. <table>
  2.         <tr>
  3.                 <td colspan="2">Deze cel omvat de cellen uit 2 kolommen</td>
  4.         </tr>
  5.         <tr>
  6.                 <td>Dit is een cel</td>
  7.                 <td>Dit is een cel</td>
  8. </tr>
  9. </table>

Aangezien je in de eerste cel aangeeft dat je 2 kolommen wil omvatten, hoef je ook geen tweede wel meer aan te maken. In de tweede rij moet dit dan weer wel, tenzij je weer colspan gebruikt.
Wil je meer kolommen omvatten, dan kan je simpelweg het cijfer aanpassen ;).

Meerdere rijen omvatten is iets ingewikkelder, maar natuurlijk nog altijd gemakkelijk (zoals altijd in HTML :p).
Je gebruikt hiervoor het attribuut rowspan dat je weer toepast op de cel.
CODE
  1. <table>
  2.         <tr>
  3.                 <td rowspan="2">Deze cel omvat de cellen uit 2 rijen</td>
  4.                 <td>Dit is een cel</td>
  5.         </tr>
  6.         <tr>
  7.                 <td>Dit is een cel</td>
  8.         </tr>
  9. </table>

Je ziet dat er nu in de eerste rij een tweede cel aangemaakt wordt en in de tweede rij maar één. Dit lijkt wat ingewikkeld, maar als je er even over nadenkt, is het eigenlijk wel logisch :). In de eerste rij, maak je een cel aan en je zegt dat je wil dat deze 2 rijen omvat, daarna maak je nog een cel aan in die tabel. Als je dan naar de tweede rij overgaat hoef je maar één cel meer aan te maken, omdat de eerste al gemaakt is via rowspan. Je ziet dat het nog allemaal zo ingewikkeld niet is :D.

4. slot


Dit was het deel over tabellen. Je ziet dat deze heel handig zijn en je kan ze voor veel doeleinden gaan gebruiken. Maar gebruik ze niet overal. Onthou dat er veel problemen bestaan die je d.m.v. van het gebruik van tabellen kan oplossen, maar meestal bestaan er veel beter oplossingen ;-).

Vragen kunnen altijd gesteld worden, maar dan in de forums ;).

Klik hier om deel 5 afbeeldingen en hyperlinks te lezen.Dit artikel werd geschreven door Simon op vrijdag 30 maart 2007 om 21:18 en werd sindsdien 11799 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door Kilian op maandag 1 juni 2009 om 12:00:08.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Misschien ook even vermelden dat je ook een th tag hebt. Deze is de titel (header) tag. Je krijgt dan iets als onderstaande:
CODE
  1.  
  2. <table>
  3. <tr>
  4. <th>Titel 1 </th>
  5. <th>Titel 2</th>
  6. </tr>
  7. <tr>
  8. <td>data 1</td>
  9. <td>data 2</td>
  10. </tr>
  11. </table>
  12.  


Kilian

Bericht geplaatst door Simon op woensdag 9 september 2009 om 18:30:47.
Simon's avatar
Multiviteit: 3742

Dixit

Dixit Kilian op 01/06/2009 12:00:08:

Misschien ook even vermelden dat je ook een th tag hebt. Deze is de titel (header) tag. Je krijgt dan iets als onderstaande:


Zie in dit onderdeeltje onderaan :).
  • Pagina
  • 1 van 1