9. Tabellen
Tabellen worden vaak voor twee doeleinden gebruikt in internetpagina's. allereerst voor het traditionele gebruik van de tabel: het overzichtelijk, gestructureerd weergeven van data. Daarnaast worden tabellen gebruikt om elementen op de pagina te positioneren, dus voor de lay-out. De randen van de tabel worden dan onzichtbaar gemaakt zodat je niet kunt zien dat de lay-out met een tabel wordt geregeld.
Tabellen kunnen op twee manieren worden gemaakt, vanuit de standaard view en vanuit de layout view. De standard view is geschikter voor simpele tabellen voor het structureren van getallen en simpele opmaak, terwijl de layout view geschikter is voor een zeer complexe opmaak.
Voordelen verschillende views:
- Standard view:
Een hele tabel is makkelijk te centreren.
Voor iedere cel kan een achtergrondafbeelding opgegeven worden. - Layout view:
Mogelijk om vanuit visueel oogpunt cellen te plaatsen.
Makkelijk om een ingewikkeld opmaak te maken.
Een bestaande tabel kan makkelijk worden aangepast.
Naast tabellen kan de opmaak ook geregeld worden met Layers. Layers worden beschreven in hoofdstuk 10 Layers.
9.1. Standard view
Voor simpele structurering van getallen is de standaard view zeer geschikt. Maar als je een meer ingewikkelde paginaopmaak wilt maken kun je beter gebruik maken van de layout view.
Figuur 9.1: Venster voor het invoegen van een tabel
Oefening 9.1. Tabel invoegen
- Open een nieuwe lege pagina
- Druk op Insert
- Druk op Table
- Vul voor het aantal rijen 5 in
- Vul voor het aantal kolommen 3 in
- Vul bij Table width: 400 pixels in
- Geef de borders de waarde 1
- Cellspacing en Cellpadding is voor de afstanden tussen de cellen onderling en afstand tussen inhoud en celrand. Vul voor beiden 0 in
- Druk op OK
Het resultaat is altijd een tabel met cellen die even groot zijn. Als je cellen wilt samenvoegen (Modify, Table, Merge Cells) of splitsen (Modify, Table, Split Cell) dan zal je merken dat sommige randen van de cellen automatisch uitlijnen, verspringen etc. Als je inhoud in de cellen zet verandert de vorm ook. Als dit te veel problemen geeft, gebruik dan de Layout View.
Selecteren
Voor het veranderen van tabellen is goed kunnen selecteren een must. Hier zijn de belangrijkste manieren om te selecteren.
Selecteren van de hele tabel
Plaats je cursor boven een lijn van de tabel totdat je en verschuifcursor te zien krijgt (zie afbeelding). Klik dan n keer.
Figuur 9.2: Voorbeeld van het selecteren van een hele tabel
Selecteren van een aantal cellen
- Klik en sleep je muis over de cellen die je wilt selecteren.
- Klik op een cel, druk Shift in, klik op een cel een stuk verder.
- Klik op een cel, druk Control in, klik op een cel een stuk verder.
Cellen samenvoegen of splitsen (merge, split)
Hiervoor heb je geleerd hoe je verschillende cellen kunt selecteren. Het is nu mogelijk om deze cellen samen te voegen of te splitsen.
- Samenvoegen: klik op Modify, Table, Merge Cells
- Splitsen: klik op Modify, Table, Split Cells
Dit is ook mogelijk door twee knopjes in de Property Inspector.
Figuur 9.3: Linksonder in de Property Inspector voor tabellen vind je de iconen voor samenvoegen en splitsten van cellen.
De Property Inspector geeft de mogelijkheid om de volgende zaken in te stellen voor de gehele tabel.
| Tabel 9.1: Uitleg van eigenschappen die ingesteld kunnen worden in de Property Inspector van tabellen. | |
|---|---|
| Table ID | Tabelnaam. |
| Rows | Aantal rijen. |
| Cols | Aantal kolommen. |
| W | Tabelbreedte in procenten of pixels. |
| H | Tabelhoogte, in procenten of pixels. |
| Cellpadding | Ruimte tussen de randen van de cellen en de inhoud van cellen. |
| Cellspace | Ruimte tussen de verschillende cellen. |
| Align | Uitlijning van de tabel. |
| Border | De dikte van de tabelrand. |
| BG Color | Achtergrondkleur van de tabel. |
| BG Image | Achtergrondafbeelding. |
| Clear row height | Zet de hoogte terug op de standaardinstelling. |
| Clear Column Width | Zet de breedte terug op de standaardinstelling. |
| Convert Tabel width to pixels | Converteert de breedte van een tabel naar pixels. |
| Convert tabel width to percent | Converteert de breedte van een tabel naar percentages. |
De Property Inspector voor cellen, kolommen en rijen geeft de volgende instellingsmogelijkheden:
| Tabel 9.2: Instel mogelijkheden van de property Inspector voor kolommen en rijen. | |
|---|---|
| Format | De instellingen voor het formatteren van tekst. |
| Horz/ Vert | Horizontaal en verticaal uitlijnen van tekst. |
| H | Hoogte van de cellen. |
| W | Breedte van cellen. |
| No Wrap | Houdt tekst en plaatjes op 1 regel en breekt niet af. |
| Header | Om een kop te definiëren. |
| Br dr | Dikte van de rand. |
| Bg color | Achtergrondkleur van de cellen, kolommen en rijen. |
| Bg image | Achtergrondafbeelding van cellen, kolommen en rijen. |
| Merge | Voegt geselecteerde elementen samen. |
| Split cell | In kolommen of rijen. |
De standard view modus voor het maken van tabellen in Dreamweaver heeft zowel voordelen als nadelen.
- voordelen:
Centreren van de hele tabel Makkelijk celbreedte en hoogte in procenten aangeven Achtergrondafbeeldingen instellen - nadelen:
Celgroottes verspringen vaak
Moeilijk om cellen exact te positioneren
9.2. Layout View
De layout view is in gebruik sinds Dreamweaver 4 en een opluchting voor de webdesigner die al de problemen kent die tabellen je kunnen geven. Het is mogelijk om met de layout view een opmaak voor een hele pagina te maken op een makkelijke en snelle manier.
De view waar Dreamweaver standaard in opstart is de standard view. Je schakelt over naar de layout mode door op de knop layout view te drukken. Je vindt deze knop in het objectpaneel.
Figuur 9.4: De layout mode in de object panel.
Als je bent overgeschakeld is het mogelijk om een tabel te tekenen met de Draw layout Table en Draw Layout Cell knoppen. Draw layout Table geeft de ruimte aan waarmee gewerkt gaat worden. Hier kan nog geen inhoud in worden geplaatst. Draw Layout Cell geeft binnen de tabel plekken aan waar inhoud aan kan worden gegeven.
Oefening 9.2. Layout tabel invoegen.
- Klik op de Layout View knop
- Klik op Draw Layout Table
- Klik en sleep het tabelkader op de pagina
- Klik op Insert Row Above
- Klik op Insert Row Below
- Klik op Insert Colum to the left
- Klik op Insert Colum to the right
Als het goed is gegaan ziet de tabel er uit zoals hieronder:
De witte vlakken zijn dus gemaakt met Insert Row en Insert Colum. Het Groene kader is gemaakt met Draw Layout table.
Selecteren
- Eén cel
Het selecteren is vrij makkelijk. Je selecteert een cel door op de rand te klikken. Als je boven een celrand hangt met je muis, dan wordt de celrand rood. Deze cel selecteer je als je daar op klikt, deze wordt dan blauw. - Hele tabel Klik op de rand van de tabel
De afmeting van cellen kan worden veranderd door de vierkantje blokjes te verslepen. Het kan ook handmatig ingevoerd worden in de Property Inspector.
Een cel verplaatsen kan gedaan worden door op de rand te klikken en dan te slepen met de muis.
Het is mogelijk om tabellen te maken, maar er kunnen geen cellen in cellen worden gezet.
Achtergrond, uitlijning en afmetingen kunnen in de Property Inspector worden gevonden.
9.3. Fixed Width en Autostretch
Tabellen en cellen worden in de layout view altijd in pixels aangegeven. Om nu toch schermvullende opmaken te maken is er de mogelijkheid om bepaalde delen van de tabel flexibel in breedte te maken. Dit heet autostretch. Een kolom die de eigenschap autostretch heeft gekregen zal zo breed worden dat samen met de andere kolommen altijd het hele browser window is opgevuld.
Oefening 9.3. Autostretch/ Spacer Image
- Teken een tabel met 3 kolommen en 3 rijen in de layout view
- Klik op de breedte van de linkerkolom aan de onderkant van de tabel
- Klik op Make Column Autostretch
Figuur 9.6: Linker kolom wordt Autostretch
- Nadat op Make autostretch geklikt is komt Dreamweaver met de vraag welke Spacer Image het programma kan gebruiken. Waarvoor een Spacer Image wordt gebruikt wordt hierna in 9.4 Spacer Image toegelicht.
- Kies de optie Create a spacer image file
- Sla deze op onder de naam spacer.gif in de map Images
TIP: Er kan altijd maar één kolom autostretch zijn.
We laten de optie autostretch aan de hand van een aantal voorbeelden zien:
Voorbeeld 1:
Voorbeeld 2:
Voorbeeld 3:
Sleep het browser window groter en kleiner om het effect van de autostretch te kunnen zien.
9.4. Spacer Image
Als je een kolom op autostretch zet, dan zet Dreamweaver een spacer image in de kolommen met een vaste breedte. Dit gebeurt om de breedte van deze kolommen te beheersen. En spacer Image is een transparante gif van 1 pixel bij 1 pixel die onzichtbaar is in de browser en voor de beheersing van de lay-out dient. Door de spacer image vermijd je dat cellen die wel een vaste breedte hebben imploderen. Een dialoogbox zal vragen hoe de spacer image gemaakt moet worden. Voor een goede werking wordt het aangeraden de spacer image aan te maken of een reeds al aangemaakte aan te wijzen.
9.5. Eindopdracht
We gaan de pagina met Klassieke Muziek met een tweetal tabellen beter opmaken, zodat het er uit komt te zien zoals hieronder. In het voorbeeld zijn de tabellen weergegeven met een rand. Dit is alleen voor de duidelijkheid.
Figuur 9.7: voorbeeld klassieke_muziek.htm pagina
- Pas de pagina klassieke_muziek.htm zo aan dat deze er precies hetzelfde uit ziet als het voorbeeld.
- De tabel voor de hyperlinks bovenaan de pagina heeft de volgende kenmerken:
- 5 kolommen, waarvan de eerste, derde en de vierde een breedte hebben van 100 pixels.
- De andere twee kolommen hebben een breedte van 160 pixels.
- De tabel voor de afbeeldingen van componisten heeft de volgende kenmerken:
- De tabel bestaat uit 2 rijen en 5 kolommen.
- Hoogte eerste rij 26 pixels en breedte 194 pixels.
- Hoogte tweede rij 131 pixels en breedte 194 pixels.
- In de eerste rij worden de Hyperlinks naar de Named Anchors geplaatst.
- Centreer de hyperlinks en de afbeeldingen.
- Pas de opmaak van de tabellen zo aan dat randen van de tabellen niet meer te zien zijn, de pagina zou er dan uit moeten zien zoals hieronder.
Figuur 9.8: voorbeeld pagina klassieke_nuziek.htm zonder randen om de tabellen
Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.