Post on 30-Jan-2016
description
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
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
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
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!!!
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
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
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
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
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!
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
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
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!
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
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
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
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
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
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
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; }
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>…
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">
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"
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)
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
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
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}
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" >
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>
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>
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
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
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
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:
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!
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
36
A-oefening 7
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
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
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
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>
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>
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>
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.
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>
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
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
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
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>
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
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>
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.
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
52
Tabellen layouten
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
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!
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
55
Einde les 5