les 5: tabellen

Webtechnologie 1 laboWebtechnologie 1 labo

Dieter RoobrouckDieter Roobrouck

Kristel BalcaenKristel Balcaen

Claudia EeckhoutClaudia Eeckhout

Koen De WeggheleireKoen De Weggheleire

Frederik DuchiFrederik Duchi

An DeraedtAn Deraedt

Les 5: TabellenLes 5: Tabellen

ebtech

ie Lab

Inhoud: Les 5

Inleiding op tabellenElementenTabellen

Borders in xHTML / CSSTabelopmaakCellen groeperenComplexe tabellenRijen en kolommen groeperenOpmaak van tabel- en celranden

ebtech

ie Lab

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

ebtech

ie Lab

Herhalingsoefening 1

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

ebtech

ie Lab

Tabellen

Tabelstructuur : - tabelonderdelen & -opbouw - tabelstructuur via xHTML

Tabelopmaak - tabel elementen opmaken via css

ebtech

ie Lab

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

ebtech

ie Lab

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

Tabelstructuur als rijverzameling

ebtech

ie Lab

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

ebtech

ie Lab

Tabelstructuur: Voorbeeld

</table>

De minimale tabel

Bij default: zonder border!

ebtech

ie Lab

Een cel waar geen enkel karakter in voorkomt, wordt niet weergegeven.

Om dit te voorkomen plaatsen we in lege cellen een "non-breaking space"

" " = een leeg karakter zoals een spatie.

Tabelstructuur: non-breaking space

ebtech

ie Lab

</table>

Tabelstructuur: non-breaking space

ebtech

ie Lab

A-Oefening 1

Maak een basistabel zoals hieronder te zien:

Zorg voor een valid file, zoals altijd!

ebtech

ie Lab

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>

Tabelstructuur: rij- of kolomtitel

ebtech

ie Lab

<th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr>

</tr><tr>

</tr></table>

Vet + gecentreerd

Tabelstructuur: rij- of kolomtitel

ebtech

ie Lab

A-OEFENING 2

Maak volgende tabelstructuur naGebruik de CSS-properties:

border-widthborder-styleborder-color

ebtech

ie Lab

B-OEFENING 1

Maak volgende voorbeeld na:Zorg voor een valid fileMaak tabel per tabel (geneste tabel)Pas CSS toe op de tabel, de th en td

ebtech

ie Lab

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 !

Tabelstructuur: borders in CSS

ebtech

ie Lab

Cellen worden enkel getoond als ze inhoud bevatten

Voor lege cellen kan je ook het volgende gebruiken:

</table>

Tabelstructuur: lege cellen

ebtech

ie Lab

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

ebtech

ie Lab

Tabelstructuur: caption

Met het caption element definieer je een bijschrift bij een tabel. <table>

<caption>Dit is het bijschrift</caption>

<tr>…

ebtech

ie Lab

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

ebtech

ie Lab

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"

ebtech

ie Lab

B-oefening 2

Maak dit voorbeeld na op een zo efficiënt mogelijke manier

(indien nodig, haal je inspiratie op de volgende slides)

ebtech

ie Lab

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.

</table>

in pixels, vb: 10px

ebtech

ie Lab

Tussenruimte: cellpadding

Met het cellpadding attribuut wordt de afstand tussen de rand van een cel en de inhoud vastgelegd.

</table>

in pixels, vb: 10px

ebtech

ie Lab

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

ebtech

ie Lab

Tabelstructuur: cellen groeperen

Opeenvolgende cellen kunnen worden samengevoegd:horizontaal met het attribuut colspan verticaal met het attribuut rowspan

ebtech

ie Lab

Tabelstructuur: rowspan<table border="1" >

<tr> <th rowspan ="3" >Group 1</th>

<th>Titel 2</th> <th>Titel 3</th> </tr><tr>

</table>

ebtech

ie Lab

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>

</table>

ebtech

ie Lab

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

ebtech

ie Lab

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

ebtech

ie Lab

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 kijken

hoeveel rows & colsomspannen worden

height / width aanpassenmet CSS

ebtech

ie Lab

A-oefening 6

Maak de opmaak van volgende tabel na:

ebtech

ie Lab

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!

ebtech

ie Lab

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

ebtech

ie Lab

A-oefening 7

ebtech

ie Lab

Workarounds

Cf ook: position: fixed (vorige les)Maak gebruik van !important rules

die (nog) niet worden ondersteund door IE

RED #EFF0DC

ebtech

ie Lab

B-oefening 3

Hoe zou je deze paginalayout opmaken? Hoe zou je deze paginalayout opmaken? Test dit uit in valid (!) xHTMLTest dit uit in valid (!) xHTML

ebtech

ie Lab

Tabelstructuur: Onderdelen

table caption

table head

table body

table foot

table column

table row

table cel

ebtech

ie Lab

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>

ebtech

ie Lab

Tabelstructuur: in xHTML<table><caption> </caption>

<thead> <tr><th>header1</th> </tr> </thead>

<tfoot> <tr> <td>footer1</td> </tr> </tfoot><tbody> <tr> <td>rij1-kolom1</td> <td>rij1-kol2 </td></tr>

<tr> <td>rij2-kolom1</td> </tbody></table>

ebtech

ie Lab

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

</tbody></table>

ebtech

ie Lab

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.

ebtech

ie Lab

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>

ebtech

ie Lab

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

ebtech

ie Lab

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

ebtech

ie Lab

A-oefening 9

Maak deze layout na m.b.v. cols of colgroups

ebtech

ie Lab

Tabelframe: <table frame="...">

Het frame attribuut bepaalt waar al dan niet een buitenrand van een table wordt weergegeven.

</table>

ebtech

ie Lab

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

ebtech

ie Lab

Celranden: rules

Het rules attribuut bepaalt waar al dan niet de binnenste lijnen van een table worden weergegeven.

Mogelijke waarden (5):none | all | groups | rows | cols

</table>

ebtech

ie Lab

Celranden: <table rules="...">

Mogelijke waarden:none: geen lijnen (dit is de

standaardwaarde) groups: alleen de lijnen tussen de

rijgroepen en kolomgroepen rows: alleen de lijnen tussen de rijen cols: alleen de lijnen tussen de

kolommen all: alle lijnen tussen de rijen en

kolommen.

ebtech

ie Lab

Tabellen layouten

ebtech

ie Lab

A-oefening 10

Herhalingsoefening: maak gebruik van de leerstof van deze les om de volgende tabellayout exact na te maken

in dit voorbeeld gebruikte kleuren: #ccffcc #ccccff #aaaaff

ebtech

ie Lab

B-oefening 4

Maak deze tabel precies na zoals op de screenshot - op de meest efficiënte manier!

ebtech

ie Lab

Einde les 5

les 5: tabellen

Documents

tabellen - arbeitsagentur.de · nach-themen-nav.html...

formeln und tabellen

20040313083437 normen formeln tabellen

bilder und tabellen - teekey.de

bouwfysica tabellen, formules -...

hoofdstuk 5 - tabellen, grafieken,...

powerpivot-tabellen - luis · pdf filemicrosoft excel 2010 -...

bel kh-tabellen diabetes k1 170216 - stada.de ·...

tabellen zur fourier transformation

verknüpfung von tabellen umgang mit tabellen in arcmap...

konjunktur aktuell: tabellen und grafiken€¦ · 1...

latex -- satz von tabellen - torsten- · pdf fileÜbersicht...

tabellen- kalkulation excel · tabellen-kalkulation excel...

tabellen, Übersichten und analysen

verknüpfung von tabellen - arbeiten mit tabellen in arcmap...

zahlen & tabellen

anhang: dampf tabellen - springer978-3-662-13213-5/1.pdf ·...

geschäftsbericht 2020 – tabellen

module 7 – hoofdstuk 5 (4) sql – voorwaarden aan groepen...

skript listen-tabellen (1)