Instellen Stylesheet en Theme opties

In HTML en ook in WordPress kun je met tabellen werken. Standaard moet je een tabel met de hand aanmaken in HTML binnen WordPress, maar ik gebruik de editor plugin ‘TinyMCE Advanced’ waarmee dus wel in de Visual Wysiwyg editor een tabel gemaakt kan worden.

Hoe een tabel eruit ziet, wordt in hoge mate bepaald door de Stylesheet, welke in mijn geval voor een groot gedeelte bestuurd wordt door de “Atahualpa Theme Options’. In deze theme options kan in de Tables tab bepaald worden of een tabel Zebra striping heeft of Hover effect als je met de muis over de tabel gaat. Bij mij staan deze opties op ‘No’. Dit geeft een rustige tabel vorm.

Om de tabel nog mooier te krijgen, stellen we ook in de de border dikte standaard op nul staat. Dus komt in de Tables tab onder het kopje ‘Table Caption Style’ het volgende worden toegevoegd:

border-width: 0px 0px 0px 0px;

Om de header in te stellen, moet onder het kopje ‘Table Header Cells’ in de Tables tab het volgende worden ingevuld:

background: #f4f4f4;
font-weight: bold;
padding: 4px 8px;
border: solid 1px #ffffff;
text-align: left;

Om text in een tabel cell naar boven te alignen, moet onder het kopje ‘Table Body Cells’ in de Tables tab het volgende worden toegevoegd:

vertical-align: top;

Een tabel in een post of page aanmaken

Voor mijn CV had ik voor een mooie layout een tabel header nodig. Deze kun je in de editor selecteren in de row opties. Standaard staat deze op body, maar deze kan op Table Head gezet worden. Jammer genoeg zit er een foutje in de editor, want de tabel row van de head wordt niet correct in HTML code gezet. In het onderstaande stukje HTML voor een tabel, zie je de tag , deze geeft aan dat hier de header start. Daarna zie je de tag , welke aangeeft dat de regel (row) start. Daarna zie je de tag , welke de inhoud voor de eerste kolom aangeeft. Deze tag staat bij het aanmaken van een tabel met TinyMCE op , in het onderstaande voorbeeld is alles dus al gecorrigeerd. Dus tussen de tags en moeten alle ’s vervangen worden door . Een beetje jammer, maar het leed is te overzien:

<table border="0" cellspacing="0">
<thead>
<tr>
<th>Header</th> <th>Header kolom 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body</td>
<td>In de body kan heel veel text komen</td>
</tr>
</tbody>
</table>

De bovenstaande HTML code geeft de onderstaande tabel

Header Header kolom 2
Body In de body kan heel veel tekst komen
Regel 3 Voor de duidelijkheid nog maar eens een regel, anders lijkt het niet echt een tabel!