Tabellen

Niet direct eenvoudig......

Op deze pagina vindt u voorbeelden van tabellen die met de Wysiwyg editor gemaakt kunnen worden.
Zoals de ondertitel al zegt is dat niet direct eenvoudig. Vooral de invoer van een combinatie van tekst en tabellen in de editor zelf kan wel eens leiden tot de situatie dat de editor de weg kwijt raakt. Tussentijds opslaan is dan een noodzaak om niet te veel content te verliezen! Beter is het om eerst alle tekst en daarna de tabellen in te voeren.


Een eenvoudige tabel via de General tab gemaakt (dus zonder iets in te vullen op de Advanced tab)
(3 kolommen / 2 rijen / gecentreerd op pagina / vaste breedte en hoogte van tabel (300x100) / rand (= Border) 1):

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

En een andere (2 kolommen / 3 rijen / caption (= tabeltitel) / geen vaste breedte en hoogte / links op pagina / rand 3):

Tabeltitel
1-1xxxxx 1-2
2-1 2-2y
3-1zz 3-2

Ook hier geldt weer de situatie zoals beschreven bij de afbeeldingen dat de vervolgtekst naast een links- of rechtsuitgelijnde tabel getoond wordt.

Om tekst eronder te krijgen dient weer de HTML truc toegepast te worden.

Tabellen gemaakt met General en Advanced tab:

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

Dit is een tabel zoals de eerste op deze pagina maar dan nu rechtsuitgelijnd.
Via de Advanced tab heeft deze tabel een rand- en achtergrondkleur gekregen.
Ook heeft de tabel een naam (ID) gekregen. In dit geval is dat Tabelvoorbeeld. Deze naam kan gebruikt worden via toevoeging aan de URL via de #naam constructie. Zo dus.
Tevens is er een summary ingevuld ("Dit is een voorbeeldtabel") die echter niet op de webpagina te zien is maar door readers en zoekmachines gebruikt kan worden.

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

Nu is op de General tab cellpadding (ruimte tussen celwand en de inhoud) op 25 gezet; cellspacing (ruimte tussen de cellen) is op 10 gezet. Merk op dat hiermee de grootte van de tabel toeneemt.
En op de Advanced tab is een tabelachtergrond opgegeven.

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

Nu is op de General tab rand 3 gekozen en op de Advanced tab Frames=hsides en Rules=rows gekozen. Frames bepaalt welk deel van de rand zichtbaar is (in dit geval de horizontale zijden) en Rules welke lijnen er binnen de tabel zichtbaar zijn (in dit geval alleen tussen de rijen).

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3
3-1 3-2 3-3

Naast de tabs voor de tabel zelf zijn er ook mogelijkheden om instellingen op te geven voor de rijen. Hier een voorbeeld van het centreren van de gegevens en een achtergrondkleur voor elke oneven rij. Geen voorbeelden zijn er van een rij promoveren tot kop- of voetrij, verticale uitlijning, hoogte van de rij, naam (ID) en achtergrondafbeelding.

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3
3-1 3-2 3-3

Zelfs op celniveau kunnen soortgelijke zaken ingesteld worden. Hier wat voorbeelden.

De combinatiemogelijkheden zijn nog veel groter dan hier getoond.

Dan nog enkele voorbeelden van het celgedrag bij veel en weinig tekst.

In een tabel met vaste breedte en hoogte

Dit is een lange tekst en die wordt nog langer als ik nog meer intoets.

Na enter ga ik verder met intoetsen van gegevens. De bedoeling is om te laten zien wat er gebeurt met de andere cellen als de inhoud van deze cel wel erg groot wordt. Dat lijkt me nu duidelijk, de vaste maten (300 x 100) worden alleen in horizontale zin gehonoreerd en de tabel wordt opgerekt in verticale zin. Ook is te zien dat verdeling van de kolombreedte soms wat vreemde effecten kan hebben.

Hier poog ik ook veel tekst in te toetsen maar duidelijk minder dan hiernaast.
Is dit nog zichtbaar? En dit?

En eentje zonder vaste breedte en hoogte

Dit is een lange tekst en die wordt nog langer als ik nog meer intoets.

Na enter ga ik verder met intoetsen van gegevens. De bedoeling is om te laten zien wat er gebeurt met de andere cellen als de inhoud van deze cel wel erg groot wordt. Het mag duidelijk zijn dat de verdeling volledig anders is dan in bovenstaande tabel.

Hier poog ik ook veel tekst in te toetsen maar duidelijk minder dan hiernaast.
Is dit nog zichtbaar? En dit?

Gebruikte Tags: opmaak tabel

Advertentie

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Add to favorites
  • email
  • Facebook
  • LinkedIn
  • Twitter
  • EN
QR
Volg Remark Webdesign!

 

Advertentie

Copyright 2012-2019 © Remark Webdesign
https://www.remark-webdesign.nl/pivxbase/page/tabellen/remarkwebdesign