1 Les 07: Tabellen

2 Agenda van vandaag Front-end development  Toets Hoofdstuk 6  Bespreken huiswerk  Presentatie over lesstof  tabellen  positionering

2 Wat is een tabel? Front-end development

2 Definitie: Front-end development Een tabel is een matrix van kleine eenheden, cellen genaamd,matrixcellen die in veel gevallen bedoeld is om gegevens overzichtelijk te presenteren.

2 Basis tags voor een tabel: Front-end development

2 Basis tags voor een tabel:tabel Front-end development XHTMLCSS Cel 1 Cel 2 Cel 3 Cel 4 table { /* margin: 0; /* helpt niet tegen ruimte tussen cellen */ /* border-spacing:0; /* vanaf IE8 haalt wel ruimte weg, maar niet dubbele border */ /* border-collapse: separate; /* default ziet er niet uit */ border-collapse: collapse; } td { border: 1px solid #000000; padding: 1px 4px; } Geen CSS:Alleen border:Border-spacing:0;Border-collapse: collapse;

2 Meer structuur: kopjeskopjes Front-end development XHTMLCSS <table summary=”tabel met tafels"> tafel-tabel table { border-collapse: collapse; } th{ text-align:center; /*default*/ font-weight:bold; /*default*/ } th, td { border: 1px solid #000000; padding: 1px 4px; vertical-align:top; /* middle is default */ }

2 Lesopdracht 1: Front-end development Maak dit tabelletje na

2 Nog meer structuur: sectiessecties Front-end development rowspan=colspan= headers=

2 ScrollbareScrollbare tbody? (helaas veel werk) Front-end development

2 ZebraZebra-opmaak Front-end development XHTMLCSS … tr.alt td{ backgrond-color:#eeeeee; }

2 Elementen positioneren (ten opzichte van…) Front-end development  position: static;  elementen floaten  postion: relative;  position: absolute;  position: fixed;

2 position: static; (de default manier) Front-end development Elementen worden ‘in de flow’ geplaatst: (van begin (links)boven tot einde (rechts)onder)  inline elementen (,,,, of display:inline; ) worden (zolang dat past) naast het vorige element op dezelfde regel geplaatst  block-level elementen (,,, etc. of display:block; ) worden aan het begin van de volgende regel geplaatst

2 Ge’float’te elementen (herhaling) Front-end development Gefloatte elementen drijven af naar links of rechts (zitten niet meer in de normale flow) en volgende elementen lopen er omheen (de normale flow gaat verder, maar de ruimte van de gefloatte elementen wordt vrij gelaten)

2 position: relative;relative Front-end development Het element wordt verschoven ten opzichte van zijn normale positie in de flow:  de oorspronkelijke plaats blijft bezet  het verschoven element kan over iets anders heenvallen

2 position: absolute;absolute Front-end development

2 position: absolute;absolute Front-end development Het element wordt verschoven ten opzichte ‘de eerste ancestor met positie’:  het element wordt ‘uit de flow’ gehaald (volgende elementen vullen het vrijgekomen gat op)  Als er niet bij een ancestor een ‘position’ is aangegeven wordt verschoven t.o.v. de body (de hele pagina)  Als je wel wil verschuiven t.o.v. een ancestor, bereik je dat door die ancestor een position:relative; te geven (zonder verschuiving (verschuiving 0 t.o.v. oorspronkelijke positie)  Position:absolute; wordt vaak gebruikt om lagen te creeeren. De volgorde van de lagen kun je aangeven met z-index:n;

2 position: absolute; Front-end development

2 Footer vastzetten (bron: ) Front-end development

2 position: fixed;fixed Front-end development Het element wordt verschoven ten opzichte van het browser window:  het element wordt ‘uit de flow’ gehaald (volgende elementen vullen het vrijgekomen gat op)

2 Lesopdracht 2: Front-end development

2 Volgende week:  Formulieren Front-end development Huiswerk voor week 8:  week opdracht: week 7  lezen hoofdstuk 8