5 Aproximacions a 5 idees sobre l'aprenentatge (... i les competències)
Les 5: Tabellen
description
Transcript of Les 5: Tabellen
![Page 1: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/1.jpg)
1
Webtechnologie 1 laboWebtechnologie 1 labo
Dieter RoobrouckDieter Roobrouck
Kristel BalcaenKristel Balcaen
Claudia EeckhoutClaudia Eeckhout
Koen De WeggheleireKoen De Weggheleire
Frederik DuchiFrederik Duchi
An DeraedtAn Deraedt
Les 5: TabellenLes 5: Tabellen
![Page 2: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/2.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
2
Inhoud: Les 5
Inleiding op tabellenElementenTabellen
Borders in xHTML / CSSTabelopmaakCellen groeperenComplexe tabellenRijen en kolommen groeperenOpmaak van tabel- en celranden
![Page 3: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/3.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
3
Vraagjes Wat zijn selectoren? <link href=“sport.css” rel=“stylesheet”
type=“text/css” media=“aural” />graag uitleg bij alle attributen
Property text-align: inherited: yesWat wordt hiermee bedoeld?
a:hover{color: red;} – a:hover is een voorbeeld van: A. klasse id B. pseudo-selector C. blok element D. Ik weet het niet
![Page 4: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/4.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
4
Herhalingsoefening 1
Maak vorige slide in xHTML (geneste lijst) Graag: css in stijlblok (Opgelet: speciale tekens!)Vergeet niet te valideren!!!
![Page 5: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/5.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
5
Tabellen
Tabelstructuur : - tabelonderdelen & -opbouw - tabelstructuur via xHTML
Tabelopmaak - tabel elementen opmaken via css
![Page 6: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/6.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
6
Tabel
Tabel = weergave van data (figuren, text ..) in rijen met cellen.
De tabelstructuur wordt opgebouwd d.m.v. specifieke xhtml elementen (tabel, rijen , kolommen, cellen)
Opmaak gebeurt - ofwel via de specifieke tabel attributen - ofwel via css properties
![Page 7: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/7.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
7
Een tabel wordt opgemaakt uit rijen
De rijen worden opgemaakt met cellen
Vb: Tabel
Rij 1: Cel 1, Cel 2
Einde Rij 1 Rij 2
Cel 1, Cel 2 Einde Rij 2
Einde tabel
Deze tabel bevat:
2 rijen en
2 kolommen
Tabelstructuur als rijverzameling
![Page 8: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/8.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
8
Tabelstructuur in xHTML
Tabellen worden ingevoegd met <table> en afgesloten met </table>
Het <tr> element definieert een rij
Binnen <tr> definieert het <td> element de cellen in de rij
Table Row
Table Data
![Page 9: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/9.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
9
Tabelstructuur: Voorbeeld
<table><tr> <td>a1</td>
<td>a2</td> </tr><tr> <td>b1</td> <td>b2</td> </tr>
</table>
De minimale tabel
Bij default: zonder border!
![Page 10: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/10.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
10
Een cel waar geen enkel karakter in voorkomt, wordt niet weergegeven.
Om dit te voorkomen plaatsen we in lege cellen een "non-breaking space"
" " = een leeg karakter zoals een spatie.
Tabelstructuur: non-breaking space
![Page 11: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/11.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
11
<table><tr> <td> </td> <td> </td></tr><tr> <td> </td> <td> </td></tr>
</table>
Tabelstructuur: non-breaking space
![Page 12: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/12.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
12
A-Oefening 1
Maak een basistabel zoals hieronder te zien:
Zorg voor een valid file, zoals altijd!
![Page 13: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/13.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
13
Met het <th> element definieer je een cel als rij- of kolomtitel. De inhoud van zo'n cellen wordt vet afgedrukt en gecentreerd.
Het th element komt in de plaats van het td element.
<th>rij- of kolomtitel</th>
Tabelstructuur: rij- of kolomtitel
![Page 14: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/14.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
14
<table border="1"> <tr>
<th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr>
<tr> <td>a1</td> <td>a2</td> <td>a3</td>
</tr><tr>
<td>b1</td> <td>b2</td> <td>b3</td>
</tr></table>
Vet + gecentreerd
Tabelstructuur: rij- of kolomtitel
![Page 15: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/15.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
15
A-OEFENING 2
Maak volgende tabelstructuur naGebruik de CSS-properties:
border-widthborder-styleborder-color
![Page 16: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/16.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
16
B-OEFENING 1
Maak volgende voorbeeld na:Zorg voor een valid fileMaak tabel per tabel (geneste tabel)Pas CSS toe op de tabel, de th en td
![Page 17: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/17.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
17
table, td, th {border-style: solid;border-width: 2px;border-color: #336699;
}
voor tabel- en celranden: bordereigenschappen toekennen zowel aan de table als aan de cellen !
Tabelstructuur: borders in CSS
![Page 18: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/18.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
18
Cellen worden enkel getoond als ze inhoud bevatten
Voor lege cellen kan je ook het volgende gebruiken:
<table><tr> <td><br /></td>
<td><br /></td> </tr><tr> <td><br /></td> <td><br /></td> </tr>
</table>
Tabelstructuur: lege cellen
![Page 19: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/19.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
19
Tabelstructuur: opmaak Opmaak van tabellen en cellen (zoals
hoogte, breedte, achtergrondkleur, tekstkleur, ...) aanpassen m.b.v. CSS
table, td { height: 400px; width: 400px; background-color: #000000; background-image:
url(image.gif); color: #ffffff; }
![Page 20: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/20.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
20
Tabelstructuur: caption
Met het caption element definieer je een bijschrift bij een tabel. <table>
<caption>Dit is het bijschrift</caption>
<tr>…
![Page 21: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/21.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
21
Tabellen: summary
Geef tabellen het attribuut summary mee waarin je samenvat wat voor gegevens er in de tabel staan
vb: <table summary="Deze tabel bevat statistieken over het internetgebruik bij particulieren van 1999 tot 2001">
![Page 22: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/22.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
22
A-oefening 3 Maak een xHTML-pagina (en externe css-
file) aan met een tabel die er zo uitziet: kleuren:
#990033 silver
Geef de tabel de samenvatting: "Salarisenquete 2002 – lonen in de sector informatica"
![Page 23: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/23.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
23
B-oefening 2
Maak dit voorbeeld na op een zo efficiënt mogelijke manier
(indien nodig, haal je inspiratie op de volgende slides)
![Page 24: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/24.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
24
Tussenruimte: cellspacing
Met het cellspacing attribuut wordt de ruimte tussen de cellen van een tabel en de ruimte tussen de buitenste cellen en de tabelrand vastgelegd.
<table cellspacing="waarde">
</table>
in pixels, vb: 10px
![Page 25: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/25.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
25
Tussenruimte: cellpadding
Met het cellpadding attribuut wordt de afstand tussen de rand van een cel en de inhoud vastgelegd.
<table cellpadding="waarde">
</table>
in pixels, vb: 10px
![Page 26: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/26.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
26
Tussenruimte: CSS
In CSS bestaat de property border-collapse om ruimte tussen cellen te doen verdwijnen
Voor andere aanpassing werk je met de css-properties padding / padding-left / padding-top / ...
table {border-collapse:collapse}table {border-collapse:separate}
![Page 27: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/27.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
27
Tabelstructuur: cellen groeperen
Opeenvolgende cellen kunnen worden samengevoegd:horizontaal met het attribuut colspan verticaal met het attribuut rowspan
<td rowspan="3" > <td colspan=”2" >
![Page 28: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/28.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
28
Tabelstructuur: rowspan<table border="1" >
<tr> <th rowspan ="3" >Group 1</th>
<th>Titel 2</th> <th>Titel 3</th> </tr><tr>
<td >Info b2</td> <td >Info b3</td></tr><tr>
<td >Info c2</td> <td >Info c3</td></tr>
</table>
![Page 29: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/29.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
29
Tabelstructuur: colspan<table border="1">
<tr> <th rowspan ="3" >Row group 1</th>
<th>Titel 2</th> <th>Titel 3</th> </tr><tr>
<td colspan ="2" >col group b2</td></tr><tr>
<td >Info c2</td> <td >Info c3</td></tr>
</table>
![Page 30: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/30.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
30
A-oefening 4
Sla A-oefening3.htm op als A-oefening4.htm en pas aan:voeg een titelrij toe over 2 kolommen
met de juiste opmaak
![Page 31: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/31.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
31
A-oefening 5
Sla A-oefening4.htm op als A-oefening5.htm
Voeg in de 1e en de 2e cel van de 2e rij telkens een nieuwe tabel in zoals in dit voorbeeld:kleuren:
#eeeeee
![Page 32: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/32.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
32
Complexe tabellen
Vul de ontbrekende lijnen aan met denkbeeldige lijnen om het juiste aantal cellen te identificeren
Tip: altijd rij per rij overlopen! voor elke cel kijken
hoeveel rows & colsomspannen worden
height / width aanpassenmet CSS
![Page 33: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/33.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
33
A-oefening 6
Maak de opmaak van volgende tabel na:
![Page 34: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/34.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
34
Layout met tabellen
De trend uit de voorbije jaren om paginalayout m.b.v. tabellen op te maken is aan het verminderen
Beter is: CSS positioning! Uiteindelijk zijn tabellen bedoeld om
data gestructureerd weer te geven…Zolang niet alle browsers CSS
positioning correct weergeven kunnen tabellen eventueel gebruikt worden, maar als je het kan vermijden doe je dit!
![Page 35: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/35.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
35
A-oefening 7
Maak volgende pagina-layout zo nauwkeurig mogelijk na ZONDER tabel
In het bronmateriaal vind je de oudere versie met tabellen
Gebruik de bestanden uit de map "images/optical«
Zorg dat het ook op 1024 x768 in FF netjes displayed
![Page 36: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/36.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
36
A-oefening 7
![Page 37: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/37.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
37
Workarounds
Cf ook: position: fixed (vorige les)Maak gebruik van !important rules
die (nog) niet worden ondersteund door IE
RED #EFF0DC
![Page 38: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/38.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
38
B-oefening 3
Hoe zou je deze paginalayout opmaken? Hoe zou je deze paginalayout opmaken? Test dit uit in valid (!) xHTMLTest dit uit in valid (!) xHTML
![Page 39: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/39.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
39
Tabelstructuur: Onderdelen
table caption
table head
table body
table foot
table column
table row
table cel
![Page 40: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/40.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
40
Tabelstructuur: Groeperen
Groeperen vraagt minder code bij het toekennen van de css classes.De properties worden immers geldig voor de volledige groep.
Rijen kunnen worden gegroepeerd via een tabelheader <thead>, tabelfooter <tfoot>, en tabelbody <tbody>.
Kolommen kunnen worden gegroepeerd via <col> en <colgroup>
![Page 41: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/41.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
41
Tabelstructuur: in xHTML<table><caption> </caption>
<thead> <tr><th>header1</th> </tr> </thead>
<tfoot> <tr> <td>footer1</td> </tr> </tfoot><tbody> <tr> <td>rij1-kolom1</td> <td>rij1-kol2 </td></tr>
<tr> <td>rij2-kolom1</td> </tbody></table>
<td>rij2-kol2 </td> </tr>
![Page 42: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/42.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
42
Tabelstructuur: rijen groeperen
d.m.v <thead>,<tfoot>,en <tbody>in bovenstaande volgorde voor correcte validering! <table>
<thead style="background-color:#ffffcc"> <tr><th>header 1 </th><th/><th>header 2</th></tr> </thead> <tfoot style="background-color:#ccffff">
<tr><th>footer 1</th><th/> <th>footer 2</th></tr> </tfoot> <tbody style="background-color:#ffccff">
<tr><td>cell 11</td><td/><td>cell 12</td></tr><tr><td>cell 21</td><td/><td>cell 22</td></tr>
</tbody></table>
![Page 43: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/43.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
43
A-oefening 8 Ga terug naar A-oefening5.htm, sla dit op als A-
oefening8.htm Stop de eerste rij van de buitenste tabel in een
table header, de andere rijen in een table body. Wijzig de opmaak van de header en body rijen
en maak een table footer aan zoals in het voorbeeld.
![Page 44: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/44.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
44
Kolomgroepen
Soms is het praktischer om kolommen aan te spreken ipv rijen .
Waar vind je bvb. de "1e kolom" in table? per rij telkens de 1e cel
Die cellen kan je groeperenmet de elementen <colgroup> en <col>
![Page 45: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/45.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
45
Tabelstructuur: kolommen groeperen
Bovenaan in je tabel beschrijf je welke kolomverdelingen je wil en welke eigenschappen elke kolom heeft
Bekijk de code van onderstaand voorbeeld: voorbeeldcols.htm
![Page 46: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/46.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
46
Tabelstructuur: kolommen groeperen
Je kan verschillende kolommen groeperen en samen behandelen
Opgelet: zodra je met colgroups werkt kan je geen alleenstaande cols meer gebruiken!
Bekijk de code van onderstaand voorbeeld: voorbeeldcolgroups.htm
![Page 47: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/47.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
47
A-oefening 9
Maak deze layout na m.b.v. cols of colgroups
![Page 48: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/48.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
48
Tabelframe: <table frame="...">
Het frame attribuut bepaalt waar al dan niet een buitenrand van een table wordt weergegeven.
Mogelijke waarden (9):void | above | below | hsides | vsides| lhs | rhs | box | border
<table border="10" frame="hsides" >
</table>
![Page 49: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/49.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
49
Tabelframe: <table frame="...">
Mogelijke waarden:void: geen randen (dit is de standaard) above: bovenkant below: onderkant hsides:boven en -onderkant lhs: linkerkant rhs: rechterkant vsides: linker- en rechterkant border: alle vier zijden
![Page 50: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/50.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
50
Celranden: rules
Het rules attribuut bepaalt waar al dan niet de binnenste lijnen van een table worden weergegeven.
Mogelijke waarden (5):none | all | groups | rows | cols
<table rules="groups" frame= "void" >
</table>
![Page 51: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/51.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
51
Celranden: <table rules="...">
Mogelijke waarden:none: geen lijnen (dit is de
standaardwaarde) groups: alleen de lijnen tussen de
rijgroepen en kolomgroepen rows: alleen de lijnen tussen de rijen cols: alleen de lijnen tussen de
kolommen all: alle lijnen tussen de rijen en
kolommen.
![Page 52: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/52.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
52
Tabellen layouten
![Page 53: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/53.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
53
A-oefening 10
Herhalingsoefening: maak gebruik van de leerstof van deze les om de volgende tabellayout exact na te maken
in dit voorbeeld gebruikte kleuren: #ccffcc #ccccff #aaaaff
![Page 54: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/54.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
54
B-oefening 4
Maak deze tabel precies na zoals op de screenshot - op de meest efficiënte manier!
![Page 55: Les 5: Tabellen](https://reader035.fdocumento.com/reader035/viewer/2022062410/56815858550346895dc5b261/html5/thumbnails/55.jpg)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
55
Einde les 5