les 5: tabellen

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

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

les 5: tabellen

Documents