Een tabel met borders

Een tabel toevoegen, voorzien van achtergrondkleur en randen rondom iedere cel

Voorbeeld:

	Vind de 5 verschillen voor de tijd uit is. De vrije versie heeft 150 afbeeldingen	Leuk spelletje voor de vakantie periode. Klik op de afbeelding om naar de website van www.katgames.com vervolgens op de Startknop.
	Online de klok inoefenen Hoe laat is het. Klik op de afbeelding.	Kies zelf hoe moeilijk je het wilt maken door een vinkje te klikken bij: – halve uren – kwartieren – 5 minuten – of minuten
	Ontdek de mooiste plekjes in de wereld.Klik op de afbeelding	Of ga naar de website alovelyworld.com/index.htmlEn klik op de vlag van het land, waarvan je foto’s wilt bekijken

———————————————-

Woordje vooraf

Een tabel bestaat uit één of meerdere rijen. Elke rij bevat op haar beurt één of meerdere cellen.
Onder elkaar gelegen cellen vormen een kolom. Het aantal cellen in een rij bepaalt het aantal kolommen

In mijn voorbeeld hierboven bestaat mijn tabel dus uit 3 rijen, met in elke rij 3 naast elkaar gelegen cellen.
Doordat de cellen onder elkaar gelegen zijn, kan men spreken van een tabel bestaande uit 3 rijen en 3 kolommen

Met het table element: <table> </table> in de html code wordt het begin en einde van een tabel aangegeven
Met het tr element: <tr> </tr>  wordt het begin en einde van een rij bepaald.
Met het td element: <td> </td> wordt het begin en einde van een cel binnen een rij vastgelegd.

Hierna de basis code en werkwijze voor het aanbrengen van

een tabel bestaande uit 3 rijen, met daarin 3 cellen per rij.
plus opgave van de achtergrondkleur van de tabel
alsook de dikte/soort rand/kleur van de border rondom de tabel en de cellen

Werkwijze voor het aanbrengen van de HTML code

Selecteer de volledige hier onderstaande HTML code, zodat deze in het donker staat
rechtsklik in de geselecteerde code en kies voor Kopieren
Log in in uw wordpress blog en open een bericht of pagina, al naar gelang uw keuze
Selecteer de TEKST editor in de rechterhoek boven het tekstvak,
rechtsklik in het bron tekstvak op de plaats waar u de tabel wilt aanbrengen en kies voor Plakken

<div align="center">
<table style="border: 4px solid #ff5a00;" width="580" cellspacing="1" cellpadding="4" bgcolor="#ffff00">
<tbody>
<tr>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
</tr>
<tr>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
</tr>
<tr>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
<td style="border: 2px solid #ff5a00;" width="180" height="120">Inhoud..</td>
</tr>
</tbody>
</table>
</div>

Aanpassen van de code, al naar gelang uw eigen inzicht

1) De begincode van de tabel:

<table style=”border: 4px solid #ff5a00;” … bgcolor=”#ffff00″>

– De algemene achtergrondkleur van de tabel

Met het bgcolor attribuut is het mogelijk de achtergrondkleur van een tabel te bepalen
Zoek naar bgcolor in de begincode: <table … bgcolor=”#ffff00″>
en vervang tussen de aanhalingstekens, de kleurcode #ffff00 door de kleurcode van de kleur, die u als achtergrondkleur wilt weergeven
Wenst u daarentegen geen achtergrondkleur voor uw tabel, verwijder in dit geval, bgcolor=”#ffff00” uit het <table> gedeelte van de html code
Opgelet: Bij bepaalde free wordpress thema’s, waarbij in de opmaak een achtergrondkleur voor tabellen is vastgelegd, is het niet mogelijk van de achtergrondkleur te vervangen door een ander kleur naar eigen inzicht. Bij deze thema’s heeft het aanbrengen of het behouden van het bgcolor attribuut in het <table> gedeelte dan ook geen zin

– De dikte, soort lijn en kleur van de border rondom de tabel

Met de border-style eigenschap kunt u in één keer de stijl (dikte, soort lijn en kleur) van de rand rondom een tabel definiëren.
Vervang in <table style=”border: 4px solid #ff5a00;” .. >
– Het aantal pixels bij border door een hogere of kleinere waarde, al naar gelang u een dikkere of fijnere rand rondom de tabel wilt
– Met de opgave solid wordt een doorgaande vlakke lijn bedoeld
maar u kan ook voor een andere lijn kiezen, zo betekent:
dotted: een lijn bestaande uit puntjes, dashed: een lijn bestaande uit streepjes en double: een rand met dubbele doorgaande vlakke lijn
– De kleur #ff5a00 van de tabelrand kan u wijzigen, door een andere kleurcode op te geven, waarin u de rand wilt weergeven

– De afstand tussen de rand van de cel en de inhoud van de cel

Met het cellpadding=”4″ attribuut in het table element wordt de afstand bepaald, tussen de rand van de cel en de inhoud van de cel
Hoe hoger de waarde (het getal), hoe verder de inhoud van de cel zich van de rand van de cel bevindt

– De ruimte tussen de cellen van de tabel
en de ruimte tussen de buitenste cellen en de rand van de tabel
Met het cellspacing=”2″ attribuut in het table element wordt de ruimte tussen de cellen onderling vastgelegd, alsook de ruimte tussen de buitenste cellen en de rand van de tabel
Hoe hoger de waarde (het getal), hoe meer ruimte er geschapen wordt. Hoe kleiner de waarde hoe minder ruimte.

– De breedte van de tabel

Met de eigenschap width kan u de breedte van de tabel bepalen, voor zover het door uw gekozen free wordpress thema daarin voorziet.
Vervang in dit geval het aantal px bij width=”580″ door een hogere of kleinere waarde, al naar gelang de breedte die u voor de tabel wilt.
Bij width=”100%” wordt de tabel in zijn volledige breedte van het bericht of de pagina weergegeven

———————————————-

2) De cellen

<td style=”border: 2px solid #ff5a00;” width=”180″ height=”120″>..</td>

– De dikte, soort lijn en kleur van de rand rondom iedere cel:

Met de border-style eigenschap in de begincode van het td element, kan u echter in één keer de stijl van de rand rondom een cel vastleggen.
Vervang in ieder td element:
<td style=”border: 2px solid #ff5a00;” …. >
bij style=”border: 2px solid #ff5a00;”
– het aantal pixels (hier 2px) door een hogere of kleinere waarde, al naar gelang de door u gewenste dikte voor de rand rond de cel
– de kleurcode #ff5a00 door de kleurcode van de kleur, waarin u de rand rondom de cel wilt weergeven
– en pas indien nodig, de soort lijn (solid ) aan

– De inhoud van de cel horizontaal en verticaal uitlijnen:
Standaard wordt de inhoud van de cel bij het ene thema horizontaal links en vertikaal in het midden van de cel uitgelijnd.
Bij een ander wordpress thema is dat dan weer anders bepaald.
Bij sommige thema’s kan u de uitlijning wijzigen, bij andere dan weer niet. Het hangt dus van het gekozen wordpress thema af, in hoeverre u de uileijning en richting van de cel inhoud kan wijzigen.

Voor die thema’s waar het mogelijk is, het hiernavolgende:

Met het ALIGN attribuut in het td element van de code, kan u echter de uitlijning van de inhoud wijzigen en de celinhoud horizontaal rechts of in het center uitlijnen, tenzij het door u gekozen wordpress thema, dit echter niet mogelijk maakt.
Door in de begincode <td …. >
het align=”right” attribuut toe te voegen, komt de celinhoud rechts in de cel te staan.
Bij <td align=”center”> wordt de inhoud van de cel horizontaal gecentreerd.
Het is niet nodig om in de begincode <td> het align=”left” attribuut toe te voegen, om de inhoud links uit te lijnen, vermits dit standaard zo bepaald is, tenzij in die gevallen waar dit standaard niet zo is

Met het VALIGN attribuut in het td element kan u de inhoud van een cel in verticale richting uitlijnen
Door in de begincode <td>
het valign=”top” of valign=”bottom” attribuut toe te voegen, komt de inhoud bovenaan of onderaan in de cel te staan.
Bij valign=”middle” wordt de inhoud van de cel vertikaal in het midden van de cel uitgelijnd

————————————–

Een voorbeeld hoe de tabel eruit ziet, bij het aanbrengen van de hierboven opgegeven HTML code.

Let wel: Alhoewel ik in de html code een gele achtergrondkleur voor de tabel opgegeven heb, is een bijna zwarte achtergrondkleur (eigen aan dat thema) waar te nemen, vermits het door mij gekozen free wordpress thema, een eigen kleur voor zijn thema vastgelegd heeft, waar niet van afgeweken kan worden

Inhoud..	Inhoud..	Inhoud..
Inhoud..	Inhoud..	Inhoud..
Inhoud..	Inhoud..	Inhoud..