woensdag 15 juni 2016

Hoe maak je eenvoudig een tabel in een blogpost bij Blogger



Enige tijd geleden wilde ik een tabel in een van mijn blogposts maken. Bij 'Blogger' - de gratis weblogdienst van Google - moet je een tabel zelf in elkaar zetten met HTML. Nu heb ik in een héél grijs verleden wel een cursus HTML gevolgd en mijn eigen websites gebouwd, maar sinds ik ben gaan bloggen - en dat is ook al een tijd geleden - is mijn kennis van HTML weggezakt. Kortom: ff googlen dus en op zoek naar een eenvoudige manier om in 'Blogger' een tabel te maken. Via Google vond ik het artikel 'Zo maak je een tabel in Blogger!' op het weblog 'Bloggen en loggen - Tips en tutorials voor beginners en gevorderde bloggers' wat ik zocht!

In het genoemde artikel stond een voorbeeld hoe je een tabel moest maken. De gegeven HTML-code kon je kopiëren en in het HTML-gedeelte van je blogpost plakken. Maar ja, hoe pas je de tabel aan jouw wensen aan..? Gelukkig vond ik aan het slot van het artikel een 'link' die verwees naar een 'tabel generator', de 'HTML Table Generator' op de website www.quackit.com.

Deze blogpost is wellicht een beetje 'technisch', maar wellicht interessant als je een weblog / edulog hebt bij 'Blogger' en ook wel eens een tabel in een blogpost wilt plaatsen.

Hoe werkt 'HTML Table Generator'



  •   1  = 'Table width': Geeft de breedte van de tabel aan in procenten of pixels.
  •   2  = 'Background color': Kies hier de achtergrond kleur van de tabel.
  •   3  = 'Number of rows': Geef hier aan hoeveel rijen de tabel moet hebben.
  •   4  = 'Cell spacing': Geef hier aan hoeveel ruimte er moet zijn tussen de cellen onderling.
  •   5  = 'Number of colums': Geef hier aan hoeveel kolommen de tabel moet hebben.
  •   6  = 'Cellpadding': Geef hier de ruimte aan tussen de tekst die in de cel staat en de celwand.
  •   7  = 'Border width': Geef hier de breedte van de rand van de tabel aan. Als je hier 0 invult verdwijnen de randen.
  •   8  = 'Border color': Geef hier de kleur van de randen aan.
  •   9  = 'Text color': Geef hier de kleur van de tekst aan.
  • 10  = 'Result': Hier komt de 'preview' van de tabel die je hebt gemaakt.
  • 11  = 'Code': De gegenereerde HTML-code. Kopieer die code en plak die op de gewenste plaats in de HTML van je blogpost.
De in bovenstaande afbeelding gegenereerde HTML-code maakt een tabel bestaande uit 2 rijen en 4 kolommen. De HTML-code - is ziet er zo uit:
<table border="1" style="background-color:#FFFFCC; border-collapse:collapse; border:1px solid #FFCC00; color:#000000; width:100%" cellpadding="3" cellspacing="3">
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
En zo ziet de tabel eruit in een blogpost :

Table Cell Table Cell
Table Cell Table Cell

Maar ga je de tabel invullen, dan gebeurt er in 'Blogger' dit (althans bij mij):

Boter Kist met bananen
Kaas Kist met tomaten

De breedte van de cellen is dus verschillend. Dat vind ik niet mooi. Om ervoor te zorgen dat alle cellen even groot zijn, heb ik de HTML-code handmatig iets gewijzigd:
<table border="1" style="background-color:#FFFFCC; border-collapse:collapse; border:1px solid #FFCC00; color:#000000; width:100% " cellpadding="3" cellspacing="3">
<tr>
<td 
width="375">Table Cell</td>
<td width="375">Table Cell</td>
</tr>
<tr>
<td 
width="375">Table Cell</td>
<td width="375">Table Cell</td>
</tr>
</table>
  • Verwijderd: width: 100%.
  • Toegevoegd aa iedere cel: width="375" (=pixels).
    De tabel heeft nu dus een breedte 375 + 375 = 750 pixels.
 De tabel past netjes in de blogpost en de cellen zijn allemaal even groot. Voorbeeld:

Boter Kist met bananen
Kaas Kist met tomaten

Tekst in de tabel bewerken

De tekst in de tabel uitlijnen (links - centreren - rechts) en 'dikke' (Bold) en cursieve (Italic) tekst kun je gewoon maken met de 'knopjes' van de editor.

Experimenteer met de tabellen generator

Experimenteer met de 'tabellen generator' tot de tabel helemaal conform je wensen is. Maak gewoon een 'test'-blogpost aan en probeer het uit. Uitleg in het Nederlands over het maken van tabellen met HTML vind je o.m. hier:

Nog meer 'tabellen'-generators

Voor de wat gevorderden is er de  'HTML Table Editor' Deze generator heeft wat meer mogelijkheden dan de generator die ik hierboven heb besproken.

Ga je zoeken op Google, dan vind je nog veel meer 'tabel generators'. Zoek bijvoorbeeld maar eens op 'tabel generator'.

Mocht jij een eenvoudigere manier weten om tabellen in 'Blogger' te maken, dan lees ik dat graag bij de reacties!

Gerelateerde blogposts

Geen opmerkingen:

Een reactie plaatsen

Plaats hier je reactie.

Opmerking: alleen leden van deze blog kunnen een reactie plaatsen.