Les 5: Tabellen

1. Les 5: Tabellen

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. 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

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

5. Tabellen • Tabelstructuur : - tabelonderdelen & -opbouw - tabelstructuur via xHTML • Tabelopmaak - tabel elementen opmaken via css

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. Tabelstructuur als rijverzameling • 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

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

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!

10. Tabelstructuur: non-breaking space • Een cel waar geen enkel karakter in voorkomt, wordt niet weergegeven. • Om dit te voorkomen plaatsen we in lege cellen een "non-breaking space"  "&#160;" = een leeg karakter zoals een spatie.

11. Tabelstructuur: non-breaking space <table><tr> <td>&#160;</td> <td>&#160;</td> </tr><tr> <td>&#160;</td> <td>&#160;</td> </tr> </table>

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

13. Tabelstructuur: rij- of kolomtitel • 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>

14. Tabelstructuur: rij- of kolomtitel <tableborder="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

15. A-OEFENING 2 • Maak volgende tabelstructuur na • Gebruik de CSS-properties: • border-width • border-style • border-color

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. Tabelstructuur: borders in CSS 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 !

18. Tabelstructuur: lege cellen • 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>

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. Tabelstructuur: caption • Met het caption element definieer je een bijschrift bij een tabel. • <table> <caption>Dit is het bijschrift</caption> • <tr>…

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">

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. B-oefening 2 • Maak dit voorbeeld na op een zo efficiënt mogelijke manier • (indien nodig, haal je inspiratie op de volgende slides)

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. • <tablecellspacing="waarde"></table> in pixels, vb: 10px

25. Tussenruimte: cellpadding • Met het cellpadding attribuut wordt de afstand tussen de rand van een cel en de inhoud vastgelegd. • <tablecellpadding="waarde"> • </table> in pixels, vb: 10px

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:separate} table {border-collapse:collapse}

27. Tabelstructuur: cellen groeperen • Opeenvolgende cellen kunnen worden samengevoegd: • horizontaal met het attribuut colspan • verticaal met het attribuut rowspan <td colspan=”2"> <td rowspan="3">

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>

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>

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. 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. 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 kijkenhoeveel rows & colsomspannen worden • height / width aanpassenmet CSS

33. A-oefening 6 • Maak de opmaak van volgende tabel na:

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. 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. A-oefening 7

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

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

39. Tabelstructuur: Onderdelen tablerow table cel table column

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>

41. Tabelstructuur: in xHTML

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>

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. 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>

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

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

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

48. Tabelframe: <table frame="..."> • Het frameattribuut bepaalt waar al dan niet een buitenrand van een table wordt weergegeven. • Mogelijke waarden (9):void | above | below | hsides | vsides| lhs | rhs | box | border • <tableborder="10" frame="hsides" > • </table>

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

50. Celranden: rules • Het rulesattribuut bepaalt waar al dan niet de binnenste lijnen van een table worden weergegeven. • Mogelijke waarden (5):none | all | groups | rows | cols • <tablerules="groups" frame= "void" > • </table>