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 1 2 3 4 2 4 6 8 3 6 9 12 4 8 12 16 Een tabel is een matrix van kleine eenheden, cellen genaamd, die in veel gevallen bedoeld is om gegevens overzichtelijk te presenteren.
Rijen en kolommen dienen om te zorgen dat je kunt zien dat 6 het product is van rij 2 en kolom 3
2
Basis tags voor een tabel: Front-end development
2
Basis tags voor een tabel: Front-end development XHTML CSS
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: kopjes Front-end development XHTML CSS
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 */ }
Scope legt (logische) relatie tussen kopje en bijbehorende data: 63 hoort de kopjes 7 en 9 (7x9=63) (helpt screanreaders dus bij het goed voorlezen van de tabel) Wat is default text-align voor td?
2
Lesopdracht 1: Front-end development Maak dit tabelletje na
2 Nog meer structuur: secties Front-end development rowspan= colspan=
headers=
Thead, tfoot, tbody. In deze volgorde zodat eerst de footer gerendered wordt en daarna pas de rest van de inhoud Complexe relaties leggen tussen velden en headers met id’s en het headers attribuut Colspan en rowspan.
2
Scrollbare tbody? (helaas veel werk) Front-end development
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; 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
Als er content voor het verschoven element bijkomt schuift het verschoven element gewoon op
2
position: absolute; Front-end development 1 2 3 4 5 6
Ten opzichte van wat is het blokje nu verschoven? Zit het in de flow? Het absoluut gepositioneerde blokje blijft staan, ook als er content voor bijkomt
2
position: 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;
Wanneer zou je absolute positionering gebruiken? (en wanneer floats?)
2
position: absolute; Front-end development
Als er content voor het verschoven element bijkomt schuift het verschoven element gewoon op
2
Footer vastzetten (bron: http://www.xs4all.nl/~peterned/examples/csslayout1.html ) Front-end development
2 position: 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) 3 4 5 6 1 2
Comments