Hoe maak je in HTML een responsive tabel? Bijvoorbeeld om logo’s of sponsors zichtbaar te maken op je website? Hoe kan ik een logo overzicht op een website plaatsen? Of hoe maak ik plaatjes klikbaar in een HTML tabel die goed toont op allerlei beeldschermen? Lees het in deze WordPress blog.
Hoe maak je in HTML een responsive tabel?
Een HTML responsive tabel die je met mijn hulp gaat maken, kun je herkennen doordat alle kolommen een breedte hebben die je uitdrukt in een percentage. Afhankelijk van het beeldscherm van de webbezoeker hebben de kolommen van de HTML tabel een vaste maat, doordat elk percentage het aandeel neemt van het beschikbare aantal pixels op dat specifieke beeldscherm. Wanneer je in een tabel logo’s of sponsoren wilt weergeven, neem dan deze tips ter harte bij maken van responsive tabellen:
- Gebruik mijn HTML code als basis (in het voorbeeld zijn het 18 vakken, 6 rijen met elk 3 lege ruimten) en sleutel daarmee in je website
- Zorg dat alle logo’s (in ieder geval 1 per horizontale rij) in het vierkant gemaakt zijn, zodat je responsive tabel er mooi uit komt te zien qua tussenruimten. Denk aan logo’s die minimaal 300 pixels breed zijn. Breder mag ook, maar hoe groter het plaatje, hoe langer de laadtijd van de pagina.. (denk aan 30kb)
- Het is mogelijk om alle logo’s een link mee te geven, door voor elk plaatje <img> een <a href=”link.html”> te zetten, en na de image weer een </a>. In mijn voorbeeldtabel doe ik dat niet. Wel in de weergave eronder. Hoe je in HTML een plaatje klikbaar maakt (linkt), kun je ook lezen in dit bericht.
- Je kunt elk plaatje laten uitlijnen op “Rechts”, maar mogelijk maakt het niet zoveel uit, als alle instellingen maar gelijk zijn voor elk plaatje. Je kunt in elk vak mijn plaatje wegklikken. En via ‘Media’ er een nieuw plaatje inzetten.
HTML responsive tabel code voorbeeld
<!– HTML sponsoren tabel –>
<table style=”width: 100%;” border=”0″ cellspacing=”20″ cellpadding=”10″ align=”left”>
<caption><!–omschrijving inhoud tabel in trefwoorden –></caption>
<table summary=”<!–lange omschrijving in trefwoorden –>”>
<thead>
<tr>
<th><h3>Rij 1</h3></th>
<th><h3>Rij 2</h3></th>
<th><h3>Rij 3</h3></th>
</thead>
<tbody>
<tr>
<td><img id=”longdesc-return-18626″ class=”alignright size-full wp-image-18626″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18629″ class=”alignright size-full wp-image-18629″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18630″ class=”alignright size-full wp-image-18630″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
<tr>
<td><img id=”longdesc-return-18631″ class=”alignright size-full wp-image-18631″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”html responsive tabel maken” /></td>
<td><img id=”longdesc-return-18632″ class=”alignright size-full wp-image-18632″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18633″ class=”alignright size-full wp-image-18633″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
<tr>
<td><img id=”longdesc-return-18643″ class=”alignright size-full wp-image-18643″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18635″ class=”alignright size-full wp-image-18635″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”responsive tabel maken Html” /></td>
<td><img id=”longdesc-return-18636″ class=”alignright size-full wp-image-18636″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
</tbody>
</table>
<!– EINDE HTML sponsoren tabel –>
HTML responsive tabel weergave van bovenstaande code
De bovenstaande code is gebruikt. Alleen is elk plaatje achter wel gelinkt. Via de editor kun je invoeren naar welke url elk plaatje moet verwijzen (zie “aangepaste url” instelling). Via een bericht of pagina kun je een foto bewerken door er overheen te scrollen. Klik op het potloodje. Ga naar tab geavanceerde instellingen. Zie ‘Weergave instellingen’, de titel ‘link naar’, geeft je een aantal opties. Dus kies voor aangepaste link maken. Binnen je responsive HTML tabel die je hebt gemaakt.
Rij 1 |
Rij 2 |
Rij 3 |
|---|---|---|
 |
|
|
|
|
|
|
|
|
Einde Tabel HTML voorbeeld
Hopelijk heb je van mij geleerd hoe je tabel in HTML maakt die goed scoort in een zoekmachine, omdat de SEO optimaal is
Succes met tabellen maken. En succes met WordPress. Je vindt nog meer contentvoorbeelden via de tag: code.
Gerben G van Dijk.
Het creëren en beheren van content kost vaak meer tijd dan je denkt. Daarom heeft Gerben Webredactie blog opgezet. Hier deelt hij niet alleen praktische handleidingen en online tips met jou, maar ook met zichzelf: "Oh ja, zo moet ik dat aanpakken!".
Naast zijn bijdragen aan Webredactie blog, schrijft Gerben voor Frankwatching.nl en heeft hij een boek over communicatiewerk organiseren op Amazon.com. De afgelopen tijd onderzoekt hij hoe ChatGPT SEO kan bijdragen aan contentcreatie.