Vormgeving‎ > ‎Opmaak van tekst‎ > ‎

Tekst in een tabel



Insert - Table: kies voor 1 cel.

In HTML geef je de cel een achtergrond kleur, zoals deze cel een oranje achtergrondkleur heeft.

Hier kan je ook de lijnen verwijderen (borders in HTML).
Stel de wijdte (width) in op 100% in plaats van een getal in pixels.
En een cellpadding van bijvoorbeeld 40.
Stel ook de wijdte in van de DIV die automatisch aangemaakt wordt bij het maken van een tabel DIV: width:100%

Als je zelf een groot beeldscherm hebt, en je hebt een groot getal in pixels opgegeven, ziet het er mooi uit.
Maar in een kleiner beeldscherm zie je dan slechts het linker deel van de tabel.
Door een 100% percentage op te geven voorkom je dit probleem.



Wijzigen in HTML: zoek de regel die begint met <div style= en die gevolgd wordt door <table style=.

<div style="margin: 5px 10px; display: inline; width:100%; float: left;">
<table style="background-color: rgb(168, 80, 31); color: rgb(255, 255, 255);" border="0" cellspacing="0" cellpadding="40" width="100%" height="338"><tbody>

Het is handig om, alvorens wijzigingen aan te brengen, je hele tekst te kopieren. (Ctrl A- Ctrl C).
Mocht je een fout maken in de code, dan kan je de goede versie nog terug zetten.
Je wordt trouwens wel gewaarschuwd als er zich een fout in bevindt. Annuleer dan je bewerking.

Aanbevolen wijzigingen:
- Background color: je mag hier gewoon de hexadecimale kleur opgeven, bijvoorbeeld #FFFFFF.
Google Sites verandert het zelf in de RGB code.
- Borders="1":  verander dit in borders="0" als je geen lijnen wilt zien.
- Verander width in "100%" of een klein getal, houd er rekening mee dat ook een klein beeldscherm het moet kunnen zien.
Doe dit zowel in de tabel als in de regel erboven.
- Verander eventueel ook Height in "100%"
- Vul ook cellpadding="40" in om een afstand tot de rand te creeren.
- Klik op Preview om te kijken hoe het er uit zal zien.


Hoe zet je tekst naast een plaatje? Klik op het plaatje. Onderaan zie je
Klik op L en Wrap: on.
Wil je je tekst nog iets meer naar rechts hebben?
Gebruik de inspringen toets, eventueel meer keren. In HTML wordt dat vertaald als:  <div style="margin-left: 200px;">

Als je deze pagina in een heel klein venster bekijkt, toont het oranje blok zich niet zo mooi: het komt buitnehet witte kader uit. Dat heeft te maken met het plaatje hierboven. (het plaatje met Align ed). Als ik die verklein, dan past het wel. Maar dat wil ik nu niet omdat ik dit plaatje goed wil zien.


Nog een tip:
Heb je een mooie pagina gemaakt en wil je hem ook in een andere google site?  Kopieer de gehele HTML code en plak die in de andere pagina. Let er wel op dat de links nog werken.

Hier staat het plaatje rechts.




table:  cellpadding: 20
img: margin: 5px 50px 10px 5px : het plaatje heeft nu meer afstand (50px) tot de rechterrand