Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
1 Les 07: Tabellen
2
2 Agenda van vandaag Front-end development Toets Hoofdstuk 6 Bespreken huiswerk Presentatie over lesstof tabellen positionering
3
2 Wat is een tabel? Front-end development
4
2 Definitie: Front-end development 1234 2468 36912 48 16 Een tabel is een matrix van kleine eenheden, cellen genaamd,matrixcellen die in veel gevallen bedoeld is om gegevens overzichtelijk te presenteren.
5
2 Basis tags voor een tabel: Front-end development
6
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;
7
2 Meer structuur: kopjeskopjes Front-end development XHTMLCSS <table summary=”tabel met tafels"> tafel-tabel 1 2 3 2 4 6 3 6 9 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 */ }
8
2 Lesopdracht 1: Front-end development Maak dit tabelletje na
9
2 Nog meer structuur: sectiessecties Front-end development rowspan=colspan= headers=
10
2 ScrollbareScrollbare tbody? (helaas veel werk) Front-end development
11
2 ZebraZebra-opmaak Front-end development XHTMLCSS … tr.alt td{ backgrond-color:#eeeeee; }
12
2 Elementen positioneren (ten opzichte van…) Front-end development position: static; elementen floaten postion: relative; position: absolute; position: fixed;
13
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
14
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)
15
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
16
2 position: absolute;absolute Front-end development 1 2 3456
17
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;
18
2 position: absolute; Front-end development
19
2 Footer vastzetten (bron: http://www.xs4all.nl/~peterned/examples/csslayout1.html )http://www.xs4all.nl/~peterned/examples/csslayout1.html Front-end development
20
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) 34561 2
21
2 Lesopdracht 2: Front-end development
22
2 Volgende week: Formulieren Front-end development Huiswerk voor week 8: week opdracht: week 7 lezen hoofdstuk 8
Verwante presentaties
