De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

1 Les 07: Tabellen. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 6  Bespreken huiswerk  Presentatie over lesstof  tabellen  positionering.

Verwante presentaties


Presentatie over: "1 Les 07: Tabellen. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 6  Bespreken huiswerk  Presentatie over lesstof  tabellen  positionering."— Transcript van de presentatie:

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

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 */ }
tafel-tabel 1 2 3 2 4 6 3 6 9 table { border-collapse">

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

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

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


Download ppt "1 Les 07: Tabellen. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 6  Bespreken huiswerk  Presentatie over lesstof  tabellen  positionering."

Verwante presentaties


Ads door Google