Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 5: Tabellen.

Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 5: Tabellen."— Transcript van de presentatie:

1 Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 5: Tabellen

2 Webtechnologie Labo 1 2 Inhoud: Les 5 Inleiding op tabellen Elementen Tabellen Borders in xHTML / CSS Tabelopmaak Cellen groeperen Complexe tabellen Rijen en kolommen groeperen Opmaak van tabel- en celranden

3 Webtechnologie Labo 1 3 Vraagjes Wat zijn selectoren? graag uitleg bij alle attributen Property text-align: inherited: yes Wat 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

4 Webtechnologie Labo 1 4 Herhalingsoefening 1 Maak vorige slide in xHTML (geneste lijst) Graag: css in stijlblok (Opgelet: speciale tekens!) Vergeet niet te valideren!!!

5 Webtechnologie Labo 1 5 Tabellen Tabelstructuur : - tabelonderdelen & -opbouw - tabelstructuur via xHTML Tabelopmaak - tabel elementen opmaken via css

6 Webtechnologie Labo 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

7 Webtechnologie Labo 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

8 Webtechnologie Labo 1 8 Tabelstructuur in xHTML Tabellen worden ingevoegd met en afgesloten met Het element definieert een rij Binnen definieert het element de cellen in de rij Table Row Table Data

9 Webtechnologie Labo 1 9 Tabelstructuur: Voorbeeld a1 a2 b1 b2 De minimale tabel Bij default: zonder border!

10 Webtechnologie Labo 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

11 Webtechnologie Labo 1 11     Tabelstructuur: non-breaking space

12 Webtechnologie Labo 1 12 A-Oefening 1 Maak een basistabel zoals hieronder te zien: Zorg voor een valid file, zoals altijd!

13 Webtechnologie Labo 1 13 Met het 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. rij- of kolomtitel Tabelstructuur: rij- of kolomtitel

14 Webtechnologie Labo 1 14 Titel 1 Titel 2 Titel 3 a1 a2 a3 b1 b2 b3 Vet + gecentreerd Tabelstructuur: rij- of kolomtitel

15 Webtechnologie Labo 1 15 A-OEFENING 2 Maak volgende tabelstructuur na Gebruik de CSS-properties: border-width border-style border-color

16 Webtechnologie Labo 1 16 B-OEFENING 1 Maak volgende voorbeeld na: Zorg voor een valid file Maak tabel per tabel (geneste tabel) Pas CSS toe op de tabel, de th en td

17 Webtechnologie Labo 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

18 Webtechnologie Labo 1 18 Cellen worden enkel getoond als ze inhoud bevatten Voor lege cellen kan je ook het volgende gebruiken: Tabelstructuur: lege cellen

19 Webtechnologie Labo 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; }

20 Webtechnologie Labo 1 20 Tabelstructuur: caption Met het caption element definieer je een bijschrift bij een tabel. Dit is het bijschrift …

21 Webtechnologie Labo 1 21 Tabellen: summary Geef tabellen het attribuut summary mee waarin je samenvat wat voor gegevens er in de tabel staan vb:

22 Webtechnologie Labo 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"

23 Webtechnologie Labo 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)

24 Webtechnologie Labo 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. in pixels, vb: 10px

25 Webtechnologie Labo 1 25 Tussenruimte: cellpadding Met het cellpadding attribuut wordt de afstand tussen de rand van een cel en de inhoud vastgelegd. in pixels, vb: 10px

26 Webtechnologie Labo 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}

27 Webtechnologie Labo 1 27 Tabelstructuur: cellen groeperen Opeenvolgende cellen kunnen worden samengevoegd: horizontaal met het attribuut colspan verticaal met het attribuut rowspan

28 Webtechnologie Labo 1 28 Tabelstructuur: rowspan Group 1 Titel 2 Titel 3 Info b2 Info b3 Info c2 Info c3

29 Webtechnologie Labo 1 29 Tabelstructuur: colspan Row group 1 Titel 2 Titel 3 col group b2 Info c2 Info c3

30 Webtechnologie Labo 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

31 Webtechnologie Labo 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

32 Webtechnologie Labo 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 & cols omspannen worden height / width aanpassen met CSS

33 Webtechnologie Labo 1 33 A-oefening 6 Maak de opmaak van volgende tabel na:

34 Webtechnologie Labo 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!

35 Webtechnologie Labo 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

36 Webtechnologie Labo 1 36 A-oefening 7

37 Webtechnologie Labo 1 37 Workarounds Cf ook: position: fixed (vorige les) Maak gebruik van !important rules die (nog) niet worden ondersteund door IE RED#EFF0DC

38 Webtechnologie Labo 1 38 B-oefening 3 Hoe zou je deze paginalayout opmaken? Test dit uit in valid (!) xHTML Hoe zou je deze paginalayout opmaken? Test dit uit in valid (!) xHTML

39 Webtechnologie Labo 1 39 Tabelstructuur: Onderdelen table caption table head table body table foot table column table row table cel

40 Webtechnologie Labo 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, tabelfooter, en tabelbody. Kolommen kunnen worden gegroepeerd via en

41 Webtechnologie Labo 1 41 Tabelstructuur: in xHTML header1 footer1 rij1-kolom1 rij1-kol2 rij2-kolom1 rij2-kol2

42 Webtechnologie Labo 1 42 Tabelstructuur: rijen groeperen d.m.v,,en in bovenstaande volgorde voor correcte validering! header 1 header 2 footer 1 footer 2 cell 11 cell 12 cell 21 cell 22

43 Webtechnologie Labo 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.

44 Webtechnologie Labo 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 groeperen met de elementen en

45 Webtechnologie Labo 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.htmvoorbeeldcols.htm

46 Webtechnologie Labo 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.htmvoorbeeldcolgroups.htm

47 Webtechnologie Labo 1 47 A-oefening 9 Maak deze layout na m.b.v. cols of colgroups

48 Webtechnologie Labo 1 48 Tabelframe: 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

49 Webtechnologie Labo 1 49 Tabelframe: 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

50 Webtechnologie Labo 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

51 Webtechnologie Labo 1 51 Celranden: 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.

52 Webtechnologie Labo 1 52 Tabellen layouten

53 Webtechnologie Labo 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

54 Webtechnologie Labo 1 54 B-oefening 4 Maak deze tabel precies na zoals op de screenshot - op de meest efficiënte manier!

55 Webtechnologie Labo 1 55 Einde les 5